/*
    Defines a 3 column layout with flexbox
*/

@media (min-width: 90ch) {
    .three-column-flex {
        --three-column-gap: 1em;
        display: flex;
        flex-wrap: wrap;
        gap: var( --three-column-gap );
        justify-content: center;
    }
    
    .three-column-flex > * {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: calc( 33.3333333% - ( (2 * var(--three-column-gap)) / 3) );
    }
    
}