.flex {
    display: flex;
}

.flexColumn {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: start;
    justify-content: center;
    /* row-gap: var(--gap); */
}

.fit-children>* {
    flex: 1;
    max-width: 25%;
}

.flexRow {
    /* width: 100%; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: start;
    justify-content: center;
    /* column-gap: var(--gap); */
}

.gBug {
    position: fixed;
    font-size: var(--title);
    top: 50dvh;
    left: 0px;
    transform: translateY(-50%);
}

.flexJustifyEnd {
    justify-content: end;
}

.flexJustifyStart {
    justify-content: start;
}

.flexAlignStart {
    align-items: start;
}

.flexAlignEnd {
    align-items: end;
    align-content: end;
    justify-content: end;
}

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

.noWrap {
    flex-wrap: nowrap;
}

.column0g {
    width: calc(0 + var(--g))
}

.column1 {
    width: var(--c1)
}

.column1g {
    width: calc(var(--c1) + var(--g))
}

.column2 {
    width: var(--c2)
}

.column1g {
    width: calc(var(--c2) + var(--g))
}

.column3 {
    width: var(--c3)
}

.column3g {
    width: calc(var(--c3) + var(--g))
}

.column4 {
    width: var(--c4)
}

.column4g {
    width: calc(var(--c4) + var(--g))
}

.column5 {
    width: var(--c5)
}

.column5g {
    width: calc(var(--c5) + var(--g))
}

.column6 {
    width: var(--c6)
}

.column6g {
    width: calc(var(--c6) + var(--g))
}

.column7 {
    width: var(--c7)
}

.column7g {
    width: calc(var(--c7) + var(--g))
}

.column8 {
    width: var(--c8)
}

.column8g {
    width: calc(var(--c8) + var(--g))
}

.column9 {
    width: var(--c9)
}

.column9g {
    width: calc(var(--c9) + var(--g))
}

.column10 {
    width: var(--c10)
}

.column10g {
    width: calc(var(--c10) + var(--g))
}

.column11 {
    width: var(--c11)
}

.column11g {
    width: calc(var(--c11) + var(--g))
}

.column12 {
    width: var(--c12)
}

@media screen and (orientation: portrait) {

    .rflexColumn {
        flex-direction: column;
    }

    .rflexRow {
        flex-direction: row;
    }

    .rflexJustifyEnd {
        justify-content: end;
    }

    .rflexAlignEnd {
        align-items: end;
        align-content: end;
        justify-content: end;
    }

    .rFlexJustifyStart {
        justify-content: start;
    }

    .rFlexJustifyCenter {
        justify-content: center;
    }

    .rColumn0 {
        display: none;
    }

    .column0g {
        width: calc(0 + var(--g))
    }

    .rColumn1 {
        width: var(--c1)
    }

    .rColumn1g {
        width: calc(var(--c1) + var(--g))
    }

    .rColumn1p {
        width: calc(var(--c1) - var(--hGap))
    }

    .rColumn2 {
        width: var(--c2)
    }

    .rColumn2g {
        width: calc(var(--c2) + var(--g))
    }

    .rColumn2p {
        width: calc(var(--c2) - var(--hGap))
    }

    .rColumn3 {
        width: var(--c3)
    }

    .rColumn3g {
        width: calc(var(--c3) + var(--g))
    }

    .rColumn3p {
        width: calc(var(--c3) - var(--hGap))
    }

    .rColumn4 {
        width: var(--c4)
    }

    .rColumn4g {
        width: calc(var(--c4) + var(--g))
    }

    .rColumn4p {
        width: calc(var(--c4) - var(--hGap))
    }

    .rColumn5 {
        width: var(--c5)
    }

    .rColumn5g {
        width: calc(var(--c5) + var(--g))
    }

    .rColumn5p {
        width: calc(var(--c5) - var(--hGap))
    }

    .rColumn6 {
        width: var(--c6)
    }

    .rColumn6g {
        width: calc(var(--c6) + var(--g))
    }

    .rColumn6p {
        width: calc(var(--c6) - var(--hGap))
    }

    .rColumn7 {
        width: var(--c7)
    }

    .rColumn7g {
        width: calc(var(--c7) + var(--g))
    }

    .rColumn7p {
        width: calc(var(--c7) - var(--hGap))
    }

    .rColumn8 {
        width: var(--c8)
    }

    .rColumn8g {
        width: calc(var(--c8) + var(--g))
    }

    .rColumn8p {
        width: calc(var(--c8) - var(--hGap))
    }

    .rColumn9 {
        width: var(--c9)
    }

    .rColumn9g {
        width: calc(var(--c9) + var(--g))
    }

    .rColumn9p {
        width: calc(var(--c9) - var(--hGap))
    }

    .rColumn10 {
        width: var(--c10)
    }

    .rColumn10g {
        width: calc(var(--c10) + var(--g))
    }

    .rColumn10p {
        width: calc(var(--c10) - var(--hGap))
    }

    .fit-children {
        row-gap: var(--hGap);
    }

    .fit-children>* {
        flex: 1 1 calc(50%);
        max-width: 50%;
    }
}