.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 1.1s ease, transform 6s ease;
}

.hero-slides img.active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides img {
    transform: none;
    transition: opacity .2s linear;
  }
}