.lyor-image-engine {
  --lyor-ie-aspect: 16 / 9;
  --lyor-ie-fit: cover;
  --lyor-ie-radius: 0px;
  --lyor-ie-frame-inset: 16px;
  --lyor-ie-frame-color: rgba(255, 255, 255, 0.82);
  --lyor-ie-duo-primary: #f4d49a;
  --lyor-ie-duo-secondary: #0f1218;
  --lyor-ie-duo-strength: 0.55;
  --lyor-ie-hover-scale: 1.03;
  --lyor-ie-hover-duration: 1.5s;
  --lyor-ie-grain-opacity: 0.12;
  --lyor-ie-grain-speed: 1.8s;

  position: relative;
  width: 100%;
  aspect-ratio: var(--lyor-ie-aspect);
  overflow: hidden;
  border-radius: var(--lyor-ie-radius);
  isolation: isolate;
}

.lyor-image-engine picture,
.lyor-image-engine img {
  display: block;
  width: 100%;
  height: 100%;
}

.lyor-image-engine img {
  object-fit: var(--lyor-ie-fit);
  transform: scale(1);
  transition: transform var(--lyor-ie-hover-duration) ease-out;
  will-change: transform;
}

.lyor-image-engine:hover img {
  transform: scale(var(--lyor-ie-hover-scale));
}

.lyor-image-engine.has-frame::before {
  content: "";
  position: absolute;
  inset: var(--lyor-ie-frame-inset);
  border: 1px solid var(--lyor-ie-frame-color);
  pointer-events: none;
  z-index: 5;
}

.lyor-image-engine.has-duotone {
  background: var(--lyor-ie-duo-secondary);
}

.lyor-image-engine.has-duotone img {
  filter: grayscale(1) contrast(1.06);
}

.lyor-image-engine.has-duotone picture {
  position: relative;
  z-index: 1;
}

.lyor-image-engine.has-duotone picture::before,
.lyor-image-engine.has-duotone picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lyor-image-engine.has-duotone picture::before {
  background: var(--lyor-ie-duo-secondary);
  mix-blend-mode: multiply;
  opacity: var(--lyor-ie-duo-strength);
}

.lyor-image-engine.has-duotone picture::after {
  background: var(--lyor-ie-duo-primary);
  mix-blend-mode: screen;
  opacity: var(--lyor-ie-duo-strength);
}

.lyor-image-engine.has-grain::after {
  content: "";
  position: absolute;
  inset: -120%;
  pointer-events: none;
  z-index: 6;
  opacity: var(--lyor-ie-grain-opacity);
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.38) 0.75px, transparent 1px),
    radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.3) 0.7px, transparent 1px),
    radial-gradient(circle at 35% 70%, rgba(0, 0, 0, 0.35) 0.8px, transparent 1px),
    radial-gradient(circle at 80% 72%, rgba(0, 0, 0, 0.25) 0.75px, transparent 1px);
  background-size: 110px 110px;
  animation: lyor-ie-grain var(--lyor-ie-grain-speed) steps(8) infinite;
}

@keyframes lyor-ie-grain {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(-2%, 3%, 0);
  }
  50% {
    transform: translate3d(3%, -1.5%, 0);
  }
  75% {
    transform: translate3d(-1%, -3%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}