:root {
    --c: calc((100vw - 13 * var(--m)) / 12);
}

body {
    display: flex;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.gutter {
    gap: var(--m);
}

.gutterRow {
    /* row-gap: calc(0.5 * var(--m)); */
    column-gap: var(--m);
}

.smallGutter {
    gap: calc(0.5 * var(--m));
}

/* -------------------------------------------------- COLUMN -------------------------------------------------- */

.flexCol {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.flexCol.end {
    align-content: flex-end;
}

.flexCol.start {
    align-content: flex-start;
}

.flexCol.centerH {
    align-content: center;
}

.flexCol.centerV {
    justify-content: center;
}

.flexCol.spaceV {
    justify-content: space-between;
}

/* -------------------------------------------------- ROW -------------------------------------------------- */

.flexRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* background-color: rgba(0, 255, 0, 0.5); */
}

.flexRow.justify {
    justify-content: space-between;
}

.flexRow.end {
    justify-content: flex-end;
}

.flexRow.start {
    justify-content: flex-start;
}

.flexRow.centerH {
    justify-content: center;
}

.flexRow.centerV {
    align-content: center;
    align-items: center;
}

/* -------------------------------------------------- BOTH -------------------------------------------------- */

.middle {
    justify-content: center;
}

.pad {
    padding: var(--m);
}

.c12 {
    width: calc(12 * var(--c) + 11 * var(--m) - var(--fix));
}

.c11 {
    width: calc(11 * var(--c) + 10 * var(--m) - var(--fix));
}

.c10 {
    width: calc(10 * var(--c) + 9 * var(--m) - var(--fix));
}

.c9 {
    width: calc(9 * var(--c) + 8 * var(--m) - var(--fix));
}

.c8 {
    width: calc(8 * var(--c) + 7 * var(--m) - var(--fix));
}

.c7 {
    width: calc(7 * var(--c) + 6 * var(--m) - var(--fix));
}

.c6 {
    width: calc(6 * var(--c) + 5 * var(--m) - var(--fix));
}

.c5 {
    width: calc(5 * var(--c) + 4 * var(--m) - var(--fix));
}

.c4 {
    width: calc(4 * var(--c) + 3 * var(--m) - var(--fix));
}

.c3 {
    width: calc(3 * var(--c) + 2 * var(--m) - var(--fix));
}

.c2 {
    width: calc(2 * var(--c) + 1 * var(--m) - var(--fix));
}

.c1 {
    width: calc(1 * var(--c) + 0 * var(--m) - var(--fix));
}

.c0 {
    display: none;
}

/* .c12, */
.c11,
.c10,
.c9,
.c8,
.c7,
.c6,
.c5,
.c4,
.c3,
.c2,
.c1 {
    /* background-color: green; */
}

@media screen and (orientation: portrait) {
    .rc12 {
        width: calc(12 * var(--c) + 11 * var(--m) - var(--fix));
    }

    .rc11 {
        width: calc(11 * var(--c) + 10 * var(--m) - var(--fix));
    }

    .rc10 {
        width: calc(10 * var(--c) + 9 * var(--m) - var(--fix));
    }

    .rc9 {
        width: calc(9 * var(--c) + 8 * var(--m) - var(--fix));
    }

    .rc8 {
        width: calc(8 * var(--c) + 7 * var(--m) - var(--fix));
    }

    .rc7 {
        width: calc(7 * var(--c) + 6 * var(--m) - var(--fix));
    }

    .rc6 {
        width: calc(6 * var(--c) + 5 * var(--m) - var(--fix));
    }

    .rc5 {
        width: calc(5 * var(--c) + 4 * var(--m) - var(--fix));
    }

    .rc4 {
        width: calc(4 * var(--c) + 3 * var(--m) - var(--fix));
    }

    .rc3 {
        width: calc(3 * var(--c) + 2 * var(--m) - var(--fix));
    }

    .rc2 {
        width: calc(2 * var(--c) + 1 * var(--m) - var(--fix));
    }

    .rc1 {
        width: calc(1 * var(--c) + 0 * var(--m) - var(--fix));
    }

    .rc0 {
        display: none;
    }
}