:root {
    --columns: 6;
    --grid-gap: var(--flow-s);
}

@media screen and (min-width: 1024px) {
    :root {
        --columns: 12;
    }
}

.layout-grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    margin-bottom: var(--grid-gap);
}

@media screen and (min-width: 1024px) {
    .layout-grid {
        grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    }
}

/*
    mobile: every block is full width
*/
.column {
    grid-column: span var(--columns) / span var(--columns);
}

/*
    tablet: blocks have either a span of 3 or 6.
    they get calculated by the page model method 'calculateTabletColumnSpan'
*/
@media screen and (min-width: 640px) {
    .column {
        grid-column: span var(--t) / span var(--t);
    }
}

/*
    desktop: every block takes the actual span width of the layout in kirby
*/
@media screen and (min-width: 1024px) {
    .column {
        grid-column: span var(--s) / span var(--s);
    }
}

.block-type-heading {
    background-color: tomato;
}

.block-type-text {
    background-color: orange;
}

.block-type-image {
    background-color: brown;
}