.highlight {
    /* 32px → 48px */
    --highlight-body-gap: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.011958, 3rem);

    display: grid;
    gap: var(--highlight-gap);
    padding-block-start: var(--highlight-padding);
    background-color: var(--sav-color-hellgrau);

    /* 96px → 152px after the tinted band, which brings its own room inside. */
    &:has(+ .article-teaser) {
        margin-block-end: clamp(6rem, 6rem + (100vw - 24.375rem) * 0.041854, 9.5rem);
    }

    /* 60px → 192px where the next section of a sectioned page opens with its title. */
    .page-layout > &:has(+ .heading) {
        margin-block-end: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.098655, 12rem);
    }

    .heading {
        margin-block-end: var(--highlight-body-gap);
    }

    /* Two steps above the size the heading brings along for running content. */
    .heading__text {
        font-size: var(--sav-text-headline-l-size);
        line-height: var(--sav-text-headline-l-line);
        letter-spacing: var(--sav-text-headline-l-tracking);
    }

    .button {
        margin-block-start: var(--highlight-body-gap);
    }
}

/* The section reaches both edges of the screen, so what stands in the band takes the band
   width back. */
.highlight__body {
    inline-size: min(100%, var(--sav-band-width));
    margin-inline: auto;

    @media (min-width: 64rem) {
        > * {
            max-width: var(--highlight-column);
        }
    }
}

.highlight__pictures {
    display: grid;
    gap: var(--sav-grid-gutter);

    .highlight--three-images & {
        inline-size: min(100%, var(--sav-band-width));
        margin-inline: auto;

        /* Each picture's distance below the common line is a share of this box, so the group
           narrows as one piece. */
        container-type: inline-size;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: start;

        /* One timeline for the three: on its own every picture would measure its own height and
           reach the line at a different moment. */
        view-timeline-name: --highlight-pictures;

        @media (min-width: 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}

.highlight__picture {
    display: block;
    width: 100%;
    height: auto;

    /* Both boxes of the one picture are the shapes the theme crops a full-bleed picture to, so
       every candidate arrives at the size it is drawn at and nothing of it is thrown away
       again. */
    .highlight--single-image & {
        aspect-ratio: 390 / 354;
        object-fit: cover;

        @media (min-width: 64rem) {
            aspect-ratio: 1728 / 783;
        }
    }

    .highlight--three-images & {
        /* Where the picture comes to rest, below the line the group starts out on. */
        margin-block-start: var(--highlight-picture-offset, 0px);
        border-radius: var(--sav-radius);

        /* Unsupported, the shorthand would fall back to the document timeline and be over before
           the first paint, leaving the group where it comes to rest. */
        @supports ((animation-timeline: view()) and (animation-range: entry)) {
            @media (prefers-reduced-motion: no-preference) {
                animation: highlight-picture-enter linear both;
                animation-timeline: --highlight-pictures;
                animation-range: entry;
            }
        }

        /* Only the narrow grid spans columns, so the wide one has nothing to take back: a span
           declared for every width would outweigh, by its selector, the rule undoing it. */
        @media (width < 64rem) {
            grid-column: span 3;

            &:nth-child(n + 2) {
                grid-column: span 2;
            }

            &:nth-child(2) {
                --highlight-picture-offset: calc(100cqw * 24 / 350);
            }
        }

        @media (min-width: 64rem) {
            &:nth-child(1) {
                --highlight-picture-offset: calc(100cqw * 43 / 1350);
            }

            &:nth-child(2) {
                --highlight-picture-offset: calc(100cqw * 191 / 1350);
            }

            &:nth-child(3) {
                --highlight-picture-offset: calc(100cqw * 117 / 1350);
            }
        }
    }
}

/* The one picture closes the grey off flush at the bottom edge. */
.highlight--single-image {
    /* 90px → 160px, body to picture */
    --highlight-gap: clamp(5.625rem, 5.625rem + (100vw - 24.375rem) * 0.052317, 10rem);

    --highlight-column: var(--sav-narrow-width);

    /* 60px → 128px */
    --highlight-padding: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.050822, 8rem);

    /* No picture chosen, so nothing closes the section off: the distance the picture would
       have stood at does it instead. */
    &:not(:has(.highlight__pictures)) {
        padding-block-end: var(--highlight-gap);
    }
}

/* The pictures stand within the grey, so it keeps the same room below them as above the title. */
.highlight--three-images {
    /* 90px → 119px, body to pictures */
    --highlight-gap: clamp(5.625rem, 5.625rem + (100vw - 24.375rem) * 0.021674, 7.4375rem);

    /* Eight of the twelve content columns: 8 × 85px + 7 × 30px. */
    --highlight-column: 55.625rem;

    /* 60px → 160px */
    --highlight-padding: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.074738, 10rem);

    padding-block-end: var(--highlight-padding);
}

/* The group settles into the staggered row the design draws rather than out of it: rising past
   that row would leave the picture above the grey it stands in, and the grey would keep the
   distance the design gives it plus the height the risen picture no longer fills. */
@keyframes highlight-picture-enter {
    from {
        translate: 0 calc(-1 * var(--highlight-picture-offset, 0px));
        opacity: 0;
    }

    /* Opaque well before the group has fully entered, or a picture would stand see-through in
       plain view. */
    40% {
        opacity: 1;
    }

    to {
        translate: 0 0;
        opacity: 1;
    }
}