.flexColumn {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: var(--m);
    column-gap: var(--mm);
}

.flexRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: var(--m);
    column-gap: var(--mm);
}

.justifyCenter {
    justify-content: center;
}

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

.topPadding {
    padding-top: var(--m);
}

.bottomPadding {
    padding-bottom: var(--m);
}

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

.gapOne {
    gap: 1px;
}

.noGap {
    row-gap: unset;
    column-gap: unset;
}

.center {
    align-items: center;
}

/* --------------------------------------------------------------------------------------------- Columns */
.column0 {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (orientation: portrait) {

    .column0 {
        display: unset;
    }

    .rColumn0 {
        display: none;
    }

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

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

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

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

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

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

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

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

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

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

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

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