@keyframes hero-image-autoplay {
  0%,
  37.5%,
  100% {
    opacity: 1;
  }

  50%,
  87.5% {
    opacity: 0;
  }
}

html body #home .hero-background-primary,
html body #home .hero-background-secondary {
  animation: hero-image-autoplay 20s cubic-bezier(0.65, 0, 0.35, 1) infinite !important;
  will-change: opacity;
}

html body #home .hero-background-secondary {
  animation-delay: -10s !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #home .hero-background-primary {
    animation: none !important;
    opacity: 1 !important;
  }

  html body #home .hero-background-secondary {
    animation: none !important;
    opacity: 0 !important;
  }
}