@layer components {

    .lights {
        max-width: var(--w-page);
        margin-inline: auto;
        padding: var(--s-9) var(--gutter) 0;

        scroll-margin-top: var(--h-header);
    }

    .lights__head {
        display: grid;
        gap: var(--s-3);
        margin-bottom: var(--s-6);
    }

    .lights__title {
        font-size: var(--t-2xl);
    }

    .lights__shown {
        font-size: var(--t-md);
        font-weight: 500;
    }

    .lights__frame {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }

    .lights__frame:focus-visible {
        outline: 2px solid var(--c-ink);
        outline-offset: 4px;
    }

    .lights__strip {
        display: grid;
        gap: var(--s-4);
        min-width: 720px;
        max-width: 1020px;
    }

    .lights__img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--r-1);
        background: var(--c-tile);
    }

    .lights__captions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s-4);
    }

    .lights__caption {
        display: grid;
        align-content: start;
        gap: var(--s-1);
        padding-right: var(--s-4);
        font-size: var(--t-sm);
        color: var(--c-muted);
        scroll-snap-align: start;
    }

    .lights__caption strong {
        font-size: var(--t-base);
        font-weight: 500;
        color: var(--c-ink);
    }

    .lights__note {
        max-width: 68ch;
        margin-top: var(--s-6);
        color: var(--c-muted);
    }

}