:root {
    --margin-between-cols: 8px;
    --nr-of-cols: 24;
}

[class*="colm-"] {
    width: 100%;
}

.colh-1 {
    --w: 1;
}

.colh-2 {
    --w: 2;
}

.colh-3 {
    --w: 3;
}

.colh-4 {
    --w: 4;
}

.colh-5 {
    --w: 5;
}

.colh-6 {
    --w: 6;
}

.colh-7 {
    --w: 7;
}

.colh-8 {
    --w: 8;
}

.colh-9 {
    --w: 9;
}

.colh-10 {
    --w: 10;
}

.colh-11 {
    --w: 11;
}

.colh-12 {
    --w: 12;
}

.colh-13 {
    --w: 13;
}

.colh-14 {
    --w: 14;
}

.colh-15 {
    --w: 15;
}

.colh-16 {
    --w: 16;
}

.colh-17 {
    --w: 17;
}

.colh-18 {
    --w: 18;
}

.colh-19 {
    --w: 19;
}

.colh-20 {
    --w: 20;
}

.colh-21 {
    --w: 21;
}

.colh-22 {
    --w: 22;
}

.colh-23 {
    --w: 23;
}

.colh-24 {
    --w: 24;
}

[class*="colh-"] {
    width: calc(var(--w) / var(--nr-of-cols) *100%);
}

@media only screen and (min-width: 875px) {
    .colm-1 {
        --w: 1;
    }
    .colm-2 {
        --w: 2;
    }
    .colm-3 {
        --w: 3;
    }
    .colm-4 {
        --w: 4;
    }
    .colm-5 {
        --w: 5;
    }
    .colm-6 {
        --w: 6;
    }
    .colm-7 {
        --w: 7;
    }
    .colm-8 {
        --w: 8;
    }
    .colm-9 {
        --w: 9;
    }
    .colm-10 {
        --w: 10;
    }
    .colm-11 {
        --w: 11;
    }
    .colm-12 {
        --w: 12;
    }
    .colm-13 {
        --w: 13;
    }
    .colm-14 {
        --w: 14;
    }
    .colm-15 {
        --w: 15;
    }
    .colm-16 {
        --w: 16;
    }
    .colm-17 {
        --w: 17;
    }
    .colm-18 {
        --w: 18;
    }
    .colm-19 {
        --w: 19;
    }
    .colm-20 {
        --w: 20;
    }
    .colm-21 {
        --w: 21;
    }
    .colm-22 {
        --w: 22;
    }
    .colm-23 {
        --w: 23;
    }
    .colm-24 {
        --w: 24;
    }
    [class*="colm-"]:first-child {
        --margin-between-cols: 0px;
    }
    [class*="colm-"] {
        width: calc(var(--w) / var(--nr-of-cols) * 100% - var(--margin-between-cols));
        margin-left: var(--margin-between-cols);
        margin-top: 0;
    }
}

@media only screen and (max-width: 875px) {
    [class*="colm-"]:not(:first-child) {
        margin-top: var(--margin-between-cols);
    }
}