/* Complete, uncropped top photograph on every screen ratio. */
.hero-media {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: #0b241e !important;
}

.hero-media::before {
  content: "" !important;
  position: absolute !important;
  inset: -5% !important;
  z-index: 0 !important;
  background-image: var(--hero-image) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: blur(24px) saturate(0.88) brightness(0.68) !important;
  opacity: 0.82 !important;
  transform: scale(1.08) !important;
}

.hero-photo {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  animation: none !important;
}

.hero-overlay {
  z-index: 2 !important;
  background:
    linear-gradient(90deg, rgba(5, 20, 17, 0.48) 0%, rgba(5, 20, 17, 0.2) 42%, rgba(5, 20, 17, 0.05) 76%),
    linear-gradient(0deg, rgba(4, 17, 14, 0.64) 0%, rgba(4, 17, 14, 0.08) 48%, rgba(4, 17, 14, 0.26) 100%) !important;
}

@media (min-width: 821px) {
  .hero {
    min-height: max(100svh, calc(100vw * 0.5747)) !important;
  }
}

@media (max-width: 820px) {
  .hero-media {
    aspect-ratio: 4030 / 2316 !important;
    min-height: 0 !important;
  }

  .hero-photo {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}