.ref-hero {
  min-height: 640px;
  display: flex;
  align-items: center;
  background-color: var(--ref-navy-950);
  text-align: left;
}

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

.ref-hero-slides {
  z-index: 0;
}

.ref-hero-slide {
  opacity: 0;
  background-position: center 45%;
  background-repeat: no-repeat;
  background-size: cover;
  animation: ref-hero-slide 18s infinite;
  will-change: opacity, transform;
}

.ref-hero-slide-1 {
  opacity: 1;
  background-image: url("/assets/images/home-hero-desktop-1.webp?v=2");
}

.ref-hero-slide-2 {
  background-image: url("/assets/images/home-hero-desktop-2.webp");
  animation-delay: 6s;
}

.ref-hero-slide-3 {
  background-image: url("/assets/images/home-hero-desktop-3.webp");
  background-position: center 38%;
  animation-delay: 12s;
}

@keyframes ref-hero-slide {
  0%,
  28% {
    opacity: 1;
    transform: scale(1);
  }

  33%,
  100% {
    opacity: 0;
    transform: scale(1.035);
  }
}

.ref-hero::before {
  z-index: 1;
  opacity: 1;
  background: linear-gradient(
    90deg,
    rgba(10, 20, 40, 0.98) 0%,
    rgba(10, 20, 40, 0.9) 42%,
    rgba(10, 20, 40, 0.52) 70%,
    rgba(10, 20, 40, 0.28) 100%
  );
}

.ref-hero .ref-container {
  z-index: 2;
}

.ref-hero h1 {
  max-width: 760px;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.45);
}

.ref-hero > div > p:last-of-type {
  margin-left: 0;
  margin-right: 0;
}

.ref-hero .ref-buttons {
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .ref-hero {
    min-height: 680px;
    align-items: flex-end;
    padding: 70px 0 54px;
  }

  .ref-hero-slide-1 {
    background-image: url("/assets/images/home-hero-mobile-1.webp");
    background-position: center 42%;
  }

  .ref-hero-slide-2 {
    background-image: url("/assets/images/home-hero-mobile-2.webp");
    background-position: center 40%;
  }

  .ref-hero-slide-3 {
    background-image: url("/assets/images/home-hero-mobile-3.webp");
    background-position: center 46%;
  }

  .ref-hero::before {
    background: linear-gradient(
      180deg,
      rgba(10, 20, 40, 0.18) 0%,
      rgba(10, 20, 40, 0.48) 42%,
      rgba(10, 20, 40, 0.96) 72%,
      rgba(10, 20, 40, 1) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .ref-hero-slide {
    animation: none;
  }

  .ref-hero-slide:not(:first-child) {
    display: none;
  }
}