@layer components {
    .grid {
        display: grid;
    }

    .grid--alignment-leading {
        align-items: start;
    }

    .grid--alignment-center {
        align-items: center;
    }

    .grid--alignment-trailing {
        align-items: end;
    }

    /* Responsive columns: a size fits as many tracks as the width allows, each at
       least that wide, capped at 100% so a single track never overflows a narrow
       container. */
    .grid--columns-xxsmall {
        grid-template-columns: repeat(
            auto-fill,
            minmax(min(100%, 4.5rem), 1fr)
        );
    }

    .grid--columns-xsmall {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    }

    .grid--columns-small {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    }

    .grid--columns-medium {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    }

    .grid--columns-large {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    }

    .grid--columns-auto {
        grid-template-columns: auto;
    }

    .grid--columns-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid--columns-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid--columns-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid--columns-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid--columns-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid--columns-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid--columns-9 {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid--columns-10 {
        grid-template-columns: repeat(10, 1fr);
    }

    .grid--columns-11 {
        grid-template-columns: repeat(11, 1fr);
    }

    .grid--columns-12 {
        grid-template-columns: repeat(12, 1fr);
    }

    .grid--rows-auto {
        grid-template-rows: auto;
    }

    .grid--rows-1 {
        grid-template-rows: repeat(1, 1fr);
    }

    .grid--rows-2 {
        grid-template-rows: repeat(2, 1fr);
    }

    .grid--rows-3 {
        grid-template-rows: repeat(3, 1fr);
    }

    .grid--rows-4 {
        grid-template-rows: repeat(4, 1fr);
    }

    .grid--rows-5 {
        grid-template-rows: repeat(5, 1fr);
    }

    .grid--rows-6 {
        grid-template-rows: repeat(6, 1fr);
    }

    .grid--rows-7 {
        grid-template-rows: repeat(7, 1fr);
    }

    .grid--rows-8 {
        grid-template-rows: repeat(8, 1fr);
    }

    .grid--rows-9 {
        grid-template-rows: repeat(9, 1fr);
    }

    .grid--rows-10 {
        grid-template-rows: repeat(10, 1fr);
    }

    .grid--rows-11 {
        grid-template-rows: repeat(11, 1fr);
    }

    .grid--rows-12 {
        grid-template-rows: repeat(12, 1fr);
    }

    .grid--spacing-0 {
        gap: var(--spacing-0);
    }

    .grid--spacing-1 {
        gap: var(--spacing-1);
    }

    .grid--spacing-2 {
        gap: var(--spacing-2);
    }

    .grid--spacing-4 {
        gap: var(--spacing-4);
    }

    .grid--spacing-8 {
        gap: var(--spacing-8);
    }

    .grid--spacing-16 {
        gap: var(--spacing-16);
    }
}