/* 2 COLUMN GRID 
    2 simple columns
*/
.grid-container-col-2 {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c2-1 c2-2';

    grid-template-rows: repeat(2, auto);
    grid-template-columns: min(20%) auto;
}

.grid-col-2-1 { grid-area: c2-1; }
.grid-col-2-2 { grid-area: c2-2; }

/* 3 COLUMN GRID
    3 simple columns
*/
.grid-container-col-3 {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c3-1 c3-2 c3-3';

    grid-template-rows: repeat(3, auto);
    grid-template-columns: min(20%) auto min(20%);
}

.grid-col-3-1 { grid-area: c3-1; }
.grid-col-3-2 { grid-area: c3-2; }
.grid-col-3-3 { grid-area: c3-3; }

/* 2 COLUMN TRADITIONAL GRID 
    header - 2 columns - footer
*/
.grid-container-col-2t {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c2t-header c2t-header'
    'c2t-1 c2t-2'
    'c2t-footer c2t-footer';

    grid-template-rows: repeat(2, auto);
    grid-template-columns: minmax(20%, 50%) auto;
}

.grid-col-2t-header { grid-area: c2t-header; }
.grid-col-2t-1 { grid-area: c2t-1; }
.grid-col-2t-2 { grid-area: c2t-2; }
.grid-col-2t-footer { grid-area: c2t-footer; }

/* 3 COLUMN TRADITIONAL GRID 
    header - 3 columns - footer
*/
.grid-container-col-3t {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c3t-header c3t-header c3t-header'
    'c3t-1 c3t-2 c3t-3'
    'c3t-footer c3t-footer c3t-footer';

    grid-template-rows: repeat(3, auto);
    grid-template-columns: min(30%) auto min(30%);
}

.grid-col-3t-header { grid-area: c3t-header; }
.grid-col-3t-1 { grid-area: c3t-1; }
.grid-col-3t-2 { grid-area: c3t-2; }
.grid-col-3t-3 { grid-area: c3t-3; }
.grid-col-3t-footer { grid-area: c3t-footer; }


/* 4 COLUMN GRID
    4 simple columns
*/
.grid-container-col-4 {
    display: grid;
    width: 100%;
    
    grid-template-areas:
    'c4-1 c4-2 c4-3 c4-4';

    grid-template-rows: repeat(3, auto);
    grid-template-columns: 30% 40% 10% 20% ;
}

.grid-col-4-1 { grid-area: c4-1; }
.grid-col-4-2 { grid-area: c4-2; }
.grid-col-4-3 { grid-area: c4-3; }
.grid-col-4-4 { grid-area: c4-3; }

/* INK OVERRIDES */
.grid-container-col-2t-ink-override {
    grid-template-columns: 60% 40%;
}

.grid-col-3-1-ink-override {
    width: calc(100% - 2em);
}

.grid-col-2t-2-child-ink-override {
    width: fit-content;
    float: left;
    padding: .5em;
}