/* Variables */

:root {
    --white: white;
    --dark-grey: #1E1E1E;

    --stroke-weight: 0.125rem;

    --header-height: 3rem;
    --menu-height: max(100svh, 20rem); /* header and colour bar with the story list open */

    --max-width: 1800px;
}


/* Breakpoints (media query rems are always 16px): below 50rem is phone (2 columns, 3 from 37.5rem), 50rem tablet,
   77rem desktop. Media queries can't read variables, so the other stylesheets repeat 50rem and 77rem; keep them in
   step. */
:root {
    --gutter: 1rem;
    --tg-columns: 2;

    @media (min-width: 37.5rem) {
        --tg-columns: 3;
    }

    @media (min-width: 50rem) {
        --gutter: 2rem;
        --tg-columns: 4;
    }

    @media (min-width: 77rem) {
        --tg-columns: 6;
    }
}