/* Fade the image itself to reveal the page background, without changing its pixels. */
.image-edge-fade, [data-image-feather] {
  --fade-axis: linear-gradient(to right,
    transparent 0%,
    rgb(0 0 0 / .15) calc(var(--image-feather) * .25),
    rgb(0 0 0 / .5) calc(var(--image-feather) * .5),
    rgb(0 0 0 / .85) calc(var(--image-feather) * .75),
    #000 var(--image-feather), #000 calc(100% - var(--image-feather)),
    rgb(0 0 0 / .85) calc(100% - var(--image-feather) * .75),
    rgb(0 0 0 / .5) calc(100% - var(--image-feather) * .5),
    rgb(0 0 0 / .15) calc(100% - var(--image-feather) * .25), transparent 100%);
  --fade-vertical: linear-gradient(to bottom,
    transparent 0%,
    rgb(0 0 0 / .15) calc(var(--image-feather) * .25),
    rgb(0 0 0 / .5) calc(var(--image-feather) * .5),
    rgb(0 0 0 / .85) calc(var(--image-feather) * .75),
    #000 var(--image-feather), #000 calc(100% - var(--image-feather)),
    rgb(0 0 0 / .85) calc(100% - var(--image-feather) * .75),
    rgb(0 0 0 / .5) calc(100% - var(--image-feather) * .5),
    rgb(0 0 0 / .15) calc(100% - var(--image-feather) * .25), transparent 100%);
  -webkit-mask-image: var(--fade-axis), var(--fade-vertical);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-axis), var(--fade-vertical);
  mask-composite: intersect;
}