:root {
    --slide-width: max(320px, 80vw); /* 1280 x 720 */
}
.deck {
    counter-reset: slide;
    @media (min-width: 900px) {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 2.2rem;
        padding: 0 4vw;
        &::-webkit-scrollbar { height: 10px }
        &::-webkit-scrollbar-thumb {
            background: rgba(245, 250, 255, 0.22);
            border-radius: 999px;
        }
    }

    /* Flex containers */
    .flex, .grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1cqmax;
    }
    /* Grid containers */
    .grid {
        @media (min-width: 900px) {
            display: grid;
            &.golden-columns {
                grid-template-columns: minmax(0, 38%) minmax(0, 62%);
                gap: 5cqmax;
            }
        }
    }
}

.deck > article {
    counter-increment: slide;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--accent);
    position: relative;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch; 
    min-height: 50vh;

    &::before {
        content: counter(slide, decimal-leading-zero);
        position: absolute;
        top: 1cqmin;
        right: 1cqmin;
        font-size: 2cqmax;
        font-weight: 800;
        color: var(--muted-alt);
    }
    &.special {
        place-items: center;
        text-align: center;
        .eyebrow {
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.1cqmax;
            font-weight: 600;
        }
        h1 {
            font-family: "Playfair Display", serif;
            margin-top: 5cqmin;
            margin-bottom: 5cqmin;
        }
        p {
            color: var(--muted);
            margin-inline: auto;
        }
    }

    h1, h2, h3, p, li, dt, dd, figcaption { margin-top: 0 }
    h1, h1, h2, h3, p, li, dt, dd, figcaption, blockquote, div, dl, ol, ul {
        max-width: 100%;
    }
    h1, h2, h3, p, li, dt, dd, figcaption, blockquote { margin-top: 0 }
    p, li, dd, figcaption, blockquote {
        text-wrap: balance;
        hyphens: auto;
    }
    img {
        background: none;
        border: none;
    }

    h1 { font-size: 5cqmin }
    h2 {
        font-size: 4cqmax;
        flex: 0 0 auto;
        width: 100%;
        text-align: center;
    }
    section {
        flex: 1 1 auto;            /* fill remaining space */
        display: flex;
        align-items: center;       /* vertical center */
        justify-content: center;   /* horizontal center */
        min-height: 0;
        gap: 1cqmax;
        flex-wrap: wrap;
        @media (min-width: 900px) {
            & > :first-child { flex: 0 0 auto }
        }
        .speaker-view & > :first-child { flex: 0 0 auto }
    }

    h3, dt {
        font-size: 3cqmax;
        .katex { font-size: 4cqmax }
        .icon { width: 3cqmax; height: 3cqmax }
    }
    p, li, dd, blockquote { font-size: 2cqmax }
    .katex { font-size: 2.5cqmax }

    figure {
        display: flex;
        flex-direction: column;

        max-width: 100%;
        img {
            display: block;
            margin: auto auto;
            object-fit: contain;
            @media (min-width: 900px) {
                max-width: 100%;
                max-height: 62cqh;
            }
            .speaker-view & {
                max-width: 100%;
                max-height: 62cqh;
            }
        }
        figcaption {
            margin-top: 0.5cqmin;
            color: var(--muted);
            text-align: center;
            width: 100%;
            max-width: 100%;
            overflow-wrap: anywhere;
            word-break: normal;
            @media (min-width: 900px) {
                font-size: 2cqmin;
                .katex { font-size: 2.5cqmin }
            }
            * { font-size: inherit }
            .speaker-view & {
                font-size: 2cqmin;
                .katex { font-size: 2.5cqmin }
            }
        }
    }

    .icon {
        width: 2.5cqmax;
        height: 2.5cqmax;
    }
}