:root {
    --gutter: 15px;
}

.row {
    --column-width: calc((100% - (var(--gutter) * 11)) / 12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
    margin-bottom: var(--gutter);
    padding-inline: calc(var(--gutter) * 2);
}

.row > * {
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
}

.col-1 {width: calc((var(--column-width) * 1) + (var(--gutter) * (1 - 1)));}

.col-2 {width: calc((var(--column-width) * 2) + (var(--gutter) * (2 - 1)));}

.col-3 {width: calc((var(--column-width) * 3) + (var(--gutter) * (3 - 1)));}

.col-4 {width: calc((var(--column-width) * 4) + (var(--gutter) * (4 - 1)));}

.col-5 {width: calc((var(--column-width) * 5) + (var(--gutter) * (5 - 1)));}

.col-6 {width: calc((var(--column-width) * 6) + (var(--gutter) * (6 - 1)));}

.col-7 {width: calc((var(--column-width) * 7) + (var(--gutter) * (7 - 1)));}

.col-8 {width: calc((var(--column-width) * 8) + (var(--gutter) * (8 - 1)));}

.col-9 {width: calc((var(--column-width) * 9) + (var(--gutter) * (9 - 1)));}

.col-10 {width: calc((var(--column-width) * 10) + (var(--gutter) * (10 - 1)));}

.col-11 {width: calc((var(--column-width) * 11) + (var(--gutter) * (11 - 1)));}

.col-12 {width: calc((var(--column-width) * 12) + (var(--gutter) * (12 - 1)));}