.image-slider {
    /* The active picture is six of the twelve content columns wide, which is half the
       content band less half a gutter; on mobile it takes the band whole. */
    --image-slider-slide: var(--sav-band-width);

    --slider-slide: var(--image-slider-slide);
    --slider-gap: 0.75rem;
    /* The room lets the first and the last picture reach the centre too. */
    --slider-snap: center;
    --slider-edge: max(0px, calc((100% - var(--image-slider-slide)) / 2));

    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    @media (min-width: 64rem) {
        --image-slider-slide: calc((var(--sav-band-width) - var(--sav-grid-gutter)) / 2);
        --slider-gap: 1.875rem;

        gap: 1.25rem;
    }
}

/* A single picture is not a slider and carries neither track nor controls, so it only
   needs the width the active picture would have had. */
.image-slider--single {
    width: var(--image-slider-slide);
    margin-inline: auto;
}

.image-slider__entries {
    align-items: center;
}

/* Pictures keep their own proportion and are centred against each other, so a portrait
   among landscapes neither stretches nor pushes the row apart. The figure is positioned
   because the caption below is taken out of the flow to hide it: it would otherwise
   escape the scrolling row and stretch the page sideways. */
.image-slider__figure {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.image-slider__media {
    width: 100%;
    /* 236px → 445px, the height the design draws a picture in. A wide one stays under it and keeps
       its own proportion; a tall one is cut to it from the middle rather than pushing the row past
       the height the design allows — the slider hands out uncropped candidates, so the focus point
       the server cuts a registered size around has nothing to say here. The width stays declared,
       or a picture that has not arrived yet would leave its slide empty. */
    max-block-size: clamp(14.75rem, 14.75rem + (100vw - 24.375rem) * 0.156204, 27.8125rem);
    object-fit: cover;
    border-radius: var(--sav-radius);
}

/* Once the controls are revealed, the legend under the slider carries the caption of the
   active picture. The figure's own caption then only serves assistive technology, which
   still hears it with the picture it belongs to. */
.image-slider:has(> .image-slider__controls:not([hidden])) .image-slider__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The controls span the active picture, so the arrows sit on its two edges. */
.image-slider__controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    width: var(--image-slider-slide);
    margin-inline: auto;
}

/* All legends share one cell, so the row keeps the height of the longest one and the
   pictures above do not jump when a shorter caption follows a longer one. */
.image-slider__legends {
    display: grid;
}

.image-slider__legend {
    grid-area: 1 / 1;
    margin: 0;
    text-align: center;
    visibility: hidden;

    &[data-active] {
        visibility: visible;
    }
}