:root {
    --sm-space: 1rem;
    --md-space: 2rem;
    color-scheme: dark light;
}

body {
    box-sizing: border-box;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-gap: 2rem;
    gap: 2rem;
    grid-gap: var(--md-space);
    gap: var(--md-space);
    padding-top: calc(2rem * 2);
    padding-top: calc(var(--md-space) * 2);
    padding-bottom: 2rem;
    padding-bottom: var(--md-space);

    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
        Noto Sans, sans-serif;
}

section {
    --gap: var(--md-space);

    display: grid;
    grid-gap: var(--gap);
    gap: var(--gap);
}

section > header {
    padding-left: var(--gap);
    padding-right: var(--gap);

    display: grid;
    grid-gap: calc(1rem / 2);
    gap: calc(1rem / 2);
    grid-gap: calc(var(--sm-space) / 2);
    gap: calc(var(--sm-space) / 2);
}

section > header > :is(h2, h3) {
    margin: 0;
}

.horizontal-media-scroller {
    --size: 150px;

    display: grid;
    grid-auto-flow: column;
    grid-gap: calc(var(--gap) / 2);
    gap: calc(var(--gap) / 2);
    margin: 0;

    padding-left: var(--gap);

    padding-right: var(--gap);
    padding-bottom: calc(var(--gap) / 2);

    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -ms-scroll-snap-type: inline mandatory;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: var(--gap);
}

.horizontal-media-scroller > li {
    display: inline-block;

    /*  container padding fix  */
}

.horizontal-media-scroller > li:last-of-type figure {
    position: relative;
}

[dir="ltr"] .horizontal-media-scroller > li:last-of-type figure::after {
    right: calc(var(--gap) * -1);
}

[dir="rtl"] .horizontal-media-scroller > li:last-of-type figure::after {
    left: calc(var(--gap) * -1);
}

.horizontal-media-scroller > li:last-of-type figure::after {
    content: "";
    position: absolute;

    width: var(--gap);
    height: 100%;

    top: 0;
    right: calc(var(--gap) * -1);
}

.horizontal-media-scroller figure {
    scroll-snap-align: start;
}

.horizontal-media-scroller a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.horizontal-media-scroller a:focus {
    outline-offset: calc(var(--gap) / 4);
}

@media (prefers-reduced-motion: no-preference) {
    .horizontal-media-scroller a {
        transition: outline-offset 0.25s ease;
    }
}

figure {
    display: grid;
    grid-gap: calc(var(--gap) / 2);
    gap: calc(var(--gap) / 2);
    margin: 0;

    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

figure > picture {
    width: var(--size);
    height: var(--size);
}

figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;

    border-radius: 1ch;
    overflow: hidden;

    background-image: linear-gradient(
        to bottom,
        hsl(0, 0%, 40%),
        hsl(0, 0%, 20%)
    );
}

figure > figcaption {
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 0.75; /* demo text only */
    word-break: break-word;
}

h2 {
    font-size: 2rem;
    font-size: var(--md-space);
    font-weight: 800;
    letter-spacing: 0.75px;
}

h3 {
    font-weight: 400;
    letter-spacing: 0.75px;
}

@supports (aspect-ratio: 1) {
    .horizontal-media-scroller figure > picture {
        width: auto;
        aspect-ratio: 1;
    }
    section:nth-child(2) .horizontal-media-scroller figure > picture {
        aspect-ratio: 16/9;
    }
    section:nth-child(3) .horizontal-media-scroller figure > picture {
        height: calc(var(--size) * 2);
        aspect-ratio: 4/3;
    }

    @media (max-width: 480px) {
        section:nth-child(3) .horizontal-media-scroller figure > picture {
            height: calc(var(--size) * 1.5);
        }
    }
}