.grid {
    display: grid;
}

/* 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-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--padding-0 {
    padding: var(--spacing-0);
}

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

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

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

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

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

.grid--padding-safe {
    padding-block: var(--spacing-8);
    padding-inline: var(--spacing-4);
}

.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);
}