/**
 * Layout primitives
 */

.site-main {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: var(--space-xl);
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.grid {
    display: grid;
    gap: var(--gutter);
}

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

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

.flow > * + * {
    margin-top: var(--space-m);
}

.flow--large > * + * {
    margin-top: var(--space-l);
}