/* Preserve the complete foreground photo independently of the banner shape. */
.hero-image-contain .hero-slide { isolation: isolate; }
.hero-image-contain .hero-slide .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; background: transparent; transform: none; z-index: 1; }
.hero-photo-backdrop { position: absolute; inset: -24px; z-index: 0; pointer-events: none; }
.hero-backdrop-photo { width: 100%; height: 100%; object-fit: cover; filter: blur(20px) brightness(.78); }
@media (min-width: 761px) {
  .hero-image-cover .hero-slide .hero-photo {
    position: absolute;
    top: calc(-1 * var(--header-hero-overlap, 0px));
    left: 0;
    height: calc(100% + var(--header-hero-overlap, 0px));
  }
  .hero-photo-backdrop { top: calc(-1 * var(--header-hero-overlap, 0px) - 24px); }
}
@media (max-width: 760px) {
  .hero-image-contain .hero-slide .hero-photo { top: 0; left: 0; height: 100%; }
  .hero-photo-backdrop { top: calc(-1 * var(--header-hero-overlap, 120px) - 24px); }
  /* Media and controls are absolute, so an image-only hero needs its own height. */
  .hero:not(.hero-has-content) { min-height: var(--hero-mobile-media-height); }
}