.photo {
  /* 4:3 source image. The crop glides until the two outer faces reach
     their safe limits; only then does the image scale down. */
  --image-height: min(166.667vw, max(100svh, 75vw));
  --image-half-height: min(83.333vw, max(50svh, 37.5vw));
  --image-half-width: min(111.111vw, max(66.667svh, 50vw));
  --left-crop-limit: min(59.722vw, max(35.833svh, 26.875vw));
  --right-crop-anchor: min(159.722vw, max(95.833svh, 71.875vw));
  --left-face-offset: min(63.889vw, max(38.333svh, 28.75vw));
  --top-crop-limit: min(25vw, max(15svh, 11.25vw));
  --image-live-x: calc(50vw - var(--image-half-width));
  --image-live-y: calc(50svh - var(--image-half-height));
  --image-x: max(
    calc(-1 * var(--left-crop-limit)),
    min(var(--image-live-x), calc(100vw - var(--right-crop-anchor)))
  );
  --image-y: max(calc(-1 * var(--top-crop-limit)), min(0px, var(--image-live-y)));
  --mobile-fade: min(140px, max(0px, calc(100svh - var(--image-height))));
  --shade-edge: max(0px, calc(var(--image-x) + var(--left-face-offset)));
  background-image:
    linear-gradient(180deg, transparent 0, var(--ink) 100%),
    linear-gradient(0deg, rgba(7, 7, 7, 0.72) 0, transparent 42%),
    linear-gradient(90deg, var(--ink) 0, rgba(7, 7, 7, 0.78) 44%, transparent 100%),
    url("tafs-hero-entwurf.png");
  background-position:
    left calc(var(--image-y) + var(--image-height) - var(--mobile-fade)),
    left var(--image-y),
    left top,
    var(--image-x) var(--image-y);
  background-repeat: no-repeat;
  background-size:
    100% var(--mobile-fade),
    100% var(--image-height),
    var(--shade-edge) 100%,
    auto var(--image-height);
  filter: saturate(0.9) contrast(1.06);
}