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

.flexRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.middle {
    justify-content: center;
}

.debug {
    background-color: red;
}

.pad {
    padding: var(--m);
    /* background-color: yellow; */
}

.padV {
    padding: var(--m) 0;
    /* background-color: yellow; */
}

.padH {
    padding: 0 var(--m);
    /* background-color: yellow; */
}


.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));
}

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

@media screen and (orientation: landscape) {
    .c0 {
        display: none;
    }
}


@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;
    }
}