/* ==========================================================================
   GRID
========================================================================== */

.section {
    padding-top: var(--space-120);
    padding-bottom: var(--space-120);
}

.section-small {
    padding-top: var(--space-80);
    padding-bottom: var(--space-80);
}

.section-large {
    padding-top: var(--space-160);
    padding-bottom: var(--space-160);
}

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

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

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

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

@media (max-width: 768px) {

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