.hero-image {
  background: #11110f;
  animation: none;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transform: scale(1.065);
  filter: brightness(.94) saturate(.92) contrast(1.03);
  transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}

.hero-slide.is-active {
  z-index: 3;
  opacity: 1;
  animation: yisoHeroZoomOut 7.2s linear both;
}

.hero-slide.is-active.is-leaving {
  z-index: 2;
  opacity: 1;
}

.hero-slide:nth-child(2) { object-position: 50% 53%; }
.hero-slide:nth-child(3) { object-position: 55% 50%; }
.hero-slide:nth-child(4) { object-position: 52% 52%; }
.hero-slide:nth-child(5) { object-position: 50% 53%; }
.hero-slide:nth-child(6) { object-position: 50% 51%; }
.hero-slide:nth-child(7) { object-position: 51% 52%; }
.hero-slide:nth-child(8) { object-position: 50% 50%; }
.hero-slide:nth-child(9) { object-position: 50% 53%; }

@keyframes yisoHeroZoomOut {
  from { transform: scale(1.065); }
  to { transform: scale(1); }
}

@media (max-width: 680px) {
  .hero-slide:nth-child(1) { object-position: 58% 50%; }
  .hero-slide:nth-child(2) { object-position: 52% 52%; }
  .hero-slide:nth-child(3) { object-position: 58% 50%; }
  .hero-slide:nth-child(4) { object-position: 56% 52%; }
  .hero-slide:nth-child(8) { object-position: 55% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition-duration: .25s;
  }

  .hero-slide.is-active {
    animation: none;
    transform: scale(1);
  }
}