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

.hero-slides {
  background: #003746;
}

.hero-slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1.25s ease, transform 7s ease;
  will-change: opacity, transform;
}

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

@media (max-width: 700px) {
  .hero-slide {
    background-position: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transform: none;
    transition: opacity .35s ease;
  }
}