/*
    Defines a 3 column layout with flexbox
*/

.three-column-flex {
    --three-column-gap: 1em;
    display: flex;
    gap: var( --three-column-gap );
    flex-wrap: wrap;
    justify-content: center;
    
}

.three-column-flex > * {
    flex-grow: 1;
    flex-shrink: 0;
    
    /* flex-basis: 33.3333333333%; */

    flex-basis: calc( 33.3333333% - ( (2 * var(--three-column-gap)) / 3) );
    
}