.hero {
  min-height: clamp(460px, 64vh, 680px);
  background-image:
    linear-gradient(90deg, rgba(255,253,249,.98) 0%, rgba(255,253,249,.94) 27%, rgba(255,253,249,.74) 42%, rgba(255,253,249,.18) 61%, rgba(255,253,249,0) 100%),
    url('/images/hero-estate-mountains.png?v=8');
  background-size: cover;
  background-position: right bottom;
}

.hero-copy {
  padding: clamp(34px, 4vw, 64px) clamp(30px, 7vw, 118px) clamp(42px, 5vw, 72px);
}

.estate-banner {
  background-image: url('/images/optimized/page-headers/estate-header-desktop.webp');
}

.gallery-banner {
  background-image: url('/images/optimized/page-headers/gallery-header-desktop.webp');
}

.faq-banner {
  background-image: url('/images/optimized/page-headers/faq-header-desktop.webp');
}

/* Homepage About Us estate photo. Match the portrait image ratio so the full front-of-house photo is visible instead of being cropped into a landscape frame. */
.photo-frame {
  min-height: 0;
  aspect-ratio: 2 / 3;
  background-image:
    linear-gradient(180deg, rgba(36,35,34,.03), rgba(36,35,34,.18)),
    url('/images/front-of-house.jpg?v=5');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--ivory);
}

/* Keep gallery placeholders separate from the homepage About Us image. */
.gallery-tile {
  background-image:
    linear-gradient(180deg, rgba(36,35,34,.03), rgba(36,35,34,.18)),
    url('/images/front-of-house.jpg?v=3');
}

@media (max-width: 768px) {
  .hero {
    min-height: 520px;
    background-image:
      linear-gradient(90deg, rgba(255,253,249,.98) 0%, rgba(255,253,249,.94) 27%, rgba(255,253,249,.74) 42%, rgba(255,253,249,.18) 61%, rgba(255,253,249,0) 100%),
      url('/images/hero-estate-mountains.png?v=8');
    background-size: cover;
    background-position: right bottom;
  }

  .hero-copy {
    padding: 34px 24px 46px;
  }

  .estate-banner {
    background-image: url('/images/optimized/page-headers/estate-header-mobile.webp');
  }

  .gallery-banner {
    background-image: url('/images/optimized/page-headers/gallery-header-mobile.webp');
  }

  .faq-banner {
    background-image: url('/images/optimized/page-headers/faq-header-mobile.webp');
  }
}