/*
=========================================================
Grid and layout helpers
=========================================================
*/

.site-container {
    width: min(
        calc(100% - (var(--space-md) * 2)),
        var(--container-width)
    );

    margin-inline: auto;
}

.section {
    padding-block: var(--space-3xl);
}

.section--compact {
    padding-block: var(--space-2xl);
}

.section--alt {
    background-color: var(--color-background-alt);
}

.section__header {
    max-width: 760px;
    margin-bottom: var(--space-2xl);
}

.section__title {
    margin-bottom: var(--space-md);
}

.section__description {
    font-size: var(--font-size-lg);
}

.content-grid {
    display: grid;
    gap: var(--space-xl);
}

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

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

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

@media (max-width: 991.98px) {
    .content-grid--3,
    .content-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .site-container {
        width: min(
            calc(100% - (var(--space-md) * 2)),
            var(--container-width)
        );
    }

    .section {
        padding-block: var(--space-2xl);
    }

    .content-grid--2,
    .content-grid--3,
    .content-grid--4 {
        grid-template-columns: 1fr;
    }

    .section__header {
        margin-bottom: var(--space-xl);
    }
}