/**
 * @file
 * This file contains reusable grid patterns.
 */

.grid.cols-2 > .content {
    --default-gap: 3em;
    --grid-item--min-width: 320px;
    --grid-column-count: 2;
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--default-gap));
    --grid-item--max-width: calc((99.9% - var(--total-gap-width)) / var(--grid-column-count));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    gap: var(--default-gap);
}

.grid.cols-3 > .content {
    --default-gap: 2em;
    --grid-item--min-width: 330px;
    --grid-column-count: 3;
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--default-gap));
    --grid-item--max-width: calc((99.9% - var(--total-gap-width)) / var(--grid-column-count));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    gap: var(--default-gap);
}

.grid.cols-4 > .content {
    --default-gap: 1em;
    --grid-item--min-width: 280px;
    --grid-column-count: 4;
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--default-gap));
    --grid-item--max-width: calc((99.9% - var(--total-gap-width)) / var(--grid-column-count));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    gap: var(--default-gap);
}