.home-hero {
  background: black;
  position: relative;
}

/* Hero media — 16:9 stage, cropped to cover. Which one shows is decided here
   rather than in script, so neither is ever painted and then swapped out. The
   iframe's src is what gets held back on mobile (see hero.php) */
.home-hero .video-container,
.home-hero .image-container {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  overflow: hidden;
}

.home-hero .video-container {
  display: none;
}

@media screen and (min-width: 769px) {
  .home-hero .video-container {
    display: block;
  }

  .home-hero .image-container {
    display: none;
  }
}

.home-hero .video-container iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.home-hero .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Scrim — darkens the top under the overlaying header and the bottom into the
   black body, while keeping the middle of the photo readable */
.home-hero .video-container::after,
.home-hero .image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    rgba(0, 0, 0, 0.55) 75%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

.home-hero .content-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
  text-align: center;
  max-width: 800px;
}

.home-hero .home-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.home-hero .home-hero-logo h2 {
  font-family: var(--font-family);
  font-size: 2.5rem;
  color: var(--white);
  text-transform: uppercase;
}

.home-hero .home-hero-logo img {
  height: 170px;
  width: 100%;
  max-width: 170px;
}

.home-hero .home-hero-logo h2 {
  color: var(--white);
  margin: 0;
  font-weight: 700;
}

.cta-container {
}

.cta-container__subtitle {
  font-family: "Arizona Cardinals", sans-serif;
  color: white;
  text-transform: capitalize;
  font-size: 88px;
}

@media screen and (max-width: 1050px) {
  .cta-container__subtitle {
    font-size: 64px;
  }
}
@media screen and (max-width: 768px) {
  .home-hero .image-container {
    aspect-ratio: auto;
    height: 75vh;
    max-height: none;
    min-height: 0;
  }

  .home-hero .content-container {
    width: 90%;
  }

  .cta-container__subtitle {
    font-size: 32px;
  }

  .home-hero .home-hero-logo {
    flex-direction: column;
    gap: 12px;
  }

  .home-hero .home-hero-logo img {
    height: 100px;
    max-width: 100px;
  }

  .home-hero .home-hero-logo h2 {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 480px) {
  .home-hero .image-container {
    height: 65vh;
  }

  .cta-container__subtitle {
    font-size: 26px;
  }

  .home-hero .home-hero-logo img {
    height: 80px;
    max-width: 80px;
  }

  .home-hero .home-hero-logo h2 {
    font-size: 1.25rem;
  }
}