/* The responsive <picture> must fill the existing hero media cell. */
.mmh-home-hero-media > picture{display:block;width:100%;height:100%;}
.mmh-home-hero-media > picture > img{display:block;width:100%;height:100%;}

/*
 * Desktop hero: dissolve the photo into the hero's own off-white gradient.
 * Masking the picture (rather than painting a flat cream rectangle over it)
 * reveals the actual background underneath without a visible vertical seam.
 * Preserve the image crop, WebP sources and all tablet/mobile styling.
 */
@media (min-width: 1200px) {
  .mmh-home-hero .mmh-home-hero-media {
    background: transparent;
  }

  /* Soft fallback for browsers without CSS image-mask support. */
  .mmh-home-hero .mmh-home-hero-media::before {
    width: 27%;
    background: linear-gradient(
      to right,
      #f9f8f4 0%,
      rgba(249, 248, 244, .92) 20%,
      rgba(249, 248, 244, .42) 65%,
      rgba(249, 248, 244, 0) 100%
    );
  }

  @supports ((-webkit-mask-image: linear-gradient(to right, transparent, #000)) or (mask-image: linear-gradient(to right, transparent, #000))) {
    .mmh-home-hero .mmh-home-hero-media::before {
      display: none;
    }

    .mmh-home-hero .mmh-home-hero-media > picture,
    .mmh-home-hero .mmh-home-hero-media > img {
      -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, .14) 8%,
        rgba(0, 0, 0, .55) 16%,
        #000 26%
      );
      mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, .14) 8%,
        rgba(0, 0, 0, .55) 16%,
        #000 26%
      );
    }
  }
}