:root {
    --cellsize: 8;
    --columnwidth: calc(var(--cellsize) * 10);
    --columns: 4;
}

body, section, div {
    margin: 0;
    padding: 0;
}

body {
    font-size: calc(var(--cellsize) * 1.5px);
    line-height: calc(var(--cellsize) * 2px);
    text-align: center;
}

section {
    display: flex;
    width: calc(((var(--columns) * var(--columnwidth)) + ((var(--columns) - 1) * var(--cellsize))) * 1px);

    flex-direction: row;
    flex-wrap: wrap;

    gap: calc(var(--cellsize) * 1px);

    margin: 0 auto calc(var(--cellsize) * 1px) auto;

    text-align: left;
}

.col-1  { width: calc(var(--columnwidth) * 1px); }
.col-2  { width: calc(var(--columnwidth) * 2px); }
.col-3  { width: calc(var(--columnwidth) * 3px); }
.col-4  { width: calc(var(--columnwidth) * 4px); }
.col-5  { width: calc(var(--columnwidth) * 4px); }
.col-6  { width: calc(var(--columnwidth) * 4px); }
.col-7  { width: calc(var(--columnwidth) * 4px); }
.col-8  { width: calc(var(--columnwidth) * 4px); }
.col-9  { width: calc(var(--columnwidth) * 4px); }
.col-10 { width: calc(var(--columnwidth) * 4px); }
.col-11 { width: calc(var(--columnwidth) * 4px); }
.col-12 { width: calc(var(--columnwidth) * 4px); }

/*.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    background: #ff000011;
}*/

@media (min-width: 768px){
    :root {
        --columns: 8;
    }

    .col-5  { width: calc(var(--columnwidth) * 5px); }
    .col-6  { width: calc(var(--columnwidth) * 6px); }
    .col-7  { width: calc(var(--columnwidth) * 7px); }
    .col-8  { width: calc(var(--columnwidth) * 8px); }
    .col-9  { width: calc(var(--columnwidth) * 8px); }
    .col-10 { width: calc(var(--columnwidth) * 8px); }
    .col-11 { width: calc(var(--columnwidth) * 8px); }
    .col-12 { width: calc(var(--columnwidth) * 8px); }
}

@media (min-width: 1280px){
    :root {
        --columns: 12;
    }

    .col-9  { width: calc(var(--columnwidth) *  9px); }
    .col-10 { width: calc(var(--columnwidth) * 10px); }
    .col-11 { width: calc(var(--columnwidth) * 11px); }
    .col-12 { width: calc(var(--columnwidth) * 12px); }
}

@media (min-width: 1440px){
    :root {
        --cellsize: 9;
    }
}

@media (min-width: 1600px){
    :root {
        --cellsize: 10;
    }
}

@media (min-width: 1920px) {
    :root {
        --cellsize: 12;
    }
}

@media (min-width: 2560px) {
    :root {
        --cellsize: 16;
    }
}

@media (min-width: 3840px) {
    :root {
        --cellsize: 24;
    }
}