.grid {
    display: grid;
    gap: var(--space-section);
    grid-template-columns: repeat(4, 1fr);
}

.grid > .span-1 {
    grid-column: span 1;
}

.grid > .span-2 {
    grid-column: span 2;
}

.grid > .span-3 {
    grid-column: span 3;
}

.grid > .span-4 {
    grid-column: span 4;
}

/* Responsive */

@media (max-width: 1200px) {
    .grid > .span-lg-1 {
        grid-column: span 1;
    }

    .grid > .span-lg-2 {
        grid-column: span 2;
    }

    .grid > .span-lg-3 {
        grid-column: span 3;
    }

    .grid > .span-lg-4 {
        grid-column: span 4;
    }
}


@media (max-width: 900px) {
    .grid > .span-md-1 {
        grid-column: span 1;
    }

    .grid > .span-md-2 {
        grid-column: span 2;
    }

    .grid > .span-md-3 {
        grid-column: span 3;
    }

    .grid > .span-md-4 {
        grid-column: span 4;
    }
}

@media (max-width: 720px) {
    .grid > .span-sm-1 {
        grid-column: span 1;
    }

    .grid > .span-sm-2 {
        grid-column: span 2;
    }

    .grid > .span-sm-3 {
        grid-column: span 3;
    }

    .grid > .span-sm-4 {
        grid-column: span 4;
    }
}