.ls-grid {
    --nb-column: 4;
    --grid-gap: 1rem;
    --auto-row: min-content;
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(var(--nb-column), 1fr);
    grid-auto-rows: var(--auto-row);
}

.ls-cell {
    --col-size: 1;
    --row-size: 1;
    grid-column: span min(var(--nb-column), var(--col-size));
    grid-row: span var(--row-size);
}

@media (max-width: 1040px) {
    .ls-grid {
        --nb-column-sm: 2;
        grid-template-columns: repeat(min(var(--nb-column), var(--nb-column-sm)), 1fr);
    }

    .ls-cell {
        grid-column: span min(var(--nb-column-sm), var(--col-size));
    }
}

@media (max-width: 768px) {
    .ls-grid {
        --nb-column-xs: 1;
        grid-template-columns: repeat(min(var(--nb-column), var(--nb-column-xs)), 1fr);
    }

    .ls-cell {
        grid-column: span min(var(--nb-column-xs), var(--col-size));
    }
}