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

.grid-auto {
    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));
}

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

.col-6 {
    grid-column: span 6;
}

.col-12 {
    grid-column: span 12;
}

@media (max-width: 768px) {

    .grid-12 {
        grid-template-columns: 1fr;
    }

    .col-6 {
        grid-column: span 1;
    }
}