/* Fade the photographs themselves, including their contained-image bounds.
   Alpha reveals the surrounding surface instead of painting a white overlay. */
img.illustration-fade,
.photo-crop.illustration-fade {
  --fade-left: 0%;
  --fade-left-inner: 8%;
  --fade-right-inner: 92%;
  --fade-right: 100%;
  --fade-top: 0%;
  --fade-top-inner: 3%;
  --fade-bottom-inner: 97%;
  --fade-bottom: 100%;
  background: transparent;
  -webkit-mask-image:
    linear-gradient(to right, transparent var(--fade-left), #000 var(--fade-left-inner), #000 var(--fade-right-inner), transparent var(--fade-right)),
    linear-gradient(to bottom, transparent var(--fade-top), #000 var(--fade-top-inner), #000 var(--fade-bottom-inner), transparent var(--fade-bottom));
  mask-image:
    linear-gradient(to right, transparent var(--fade-left), #000 var(--fade-left-inner), #000 var(--fade-right-inner), transparent var(--fade-right)),
    linear-gradient(to bottom, transparent var(--fade-top), #000 var(--fade-top-inner), #000 var(--fade-bottom-inner), transparent var(--fade-bottom));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  mask-repeat: no-repeat;
}

/* Remove the contrasting strips outside letterboxed photos. Captions retain
   their own surface; interactive canvases and screen overlays are untouched. */
.product-family-image,
.editorial-card-image,
.home-family-photos,
.equipment-photo-hero figure,
.grid .visual {
  background: transparent;
}