/* Let the full-bleed hero image grow with wide and tall viewports. */
.hero {
  width: 100%;
  max-height: none;
}

.hero-image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

@media (min-width: 801px) {
  .hero {
    min-height: max(830px, 100svh, 56.25vw);
    height: auto;
  }
}

@media (max-width: 800px) {
  .hero {
    min-height: max(790px, 100svh);
    height: auto;
  }
}