.grid {
    display: grid;
    gap: var(--grid-gap, 2rem);
    grid-template-columns: 1fr;
}

.grid-card {
    grid-row: span 5;
}

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

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

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

.grid-card--column-span-5 {
    grid-column: span 5;
}


@media screen and (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(min(2, var(--grid-column-count)), 1fr);
    }
}

@media screen and (min-width: 992px) {
    .grid {
        grid-template-columns: repeat(var(--grid-column-count, 3), 1fr);
    }
}