:root {
    --grid-gap: 2.5%; /*2.5rem;*/
    --grid-margin-a: 2rem 2.5rem;
    --grid-margin-b: 1.5rem 2.5rem;
}
.grid {
    display: grid;
    grid-column-gap: var(--grid-gap);
    grid-row-gap: var(--grid-gap);
    margin: var(--grid-margin-a);
}
.grid-full {
    display: grid;
    grid-column-gap: 0;
    grid-row-gap: 0;
    margin: 0;
}
header.grid{
    margin: var(--grid-margin-b);
}
.full-width{
    width:100%;
}
.pad-it-a{
    padding: var(--grid-margin-a);
}
/* grid columns */
.cols-1 {grid-template-columns: repeat(1, 1fr);}
.cols-2 {grid-template-columns: repeat(2, 1fr);}
.cols-3 {grid-template-columns: repeat(3, 1fr);}
.cols-4 {grid-template-columns: repeat(4, 1fr);}
.cols-5 {grid-template-columns: repeat(5, 1fr);}
.cols-6 {grid-template-columns: repeat(6, 1fr);}
.cols-8 {grid-template-columns: repeat(8, 1fr);}
.cols-10 {grid-template-columns: repeat(10, 1fr);}
.cols-12 {grid-template-columns: repeat(12, 1fr);}
/* block : starting column - span amount*/
.b-1-1{grid-column: 1 / span 1;}
.b-1-2{grid-column: 1 / span 2;}
.b-1-3{grid-column: 1 / span 3;}
.b-1-4{grid-column: 1 / span 4;}
.b-1-5{grid-column: 1 / span 5;}
.b-1-6{grid-column: 1 / span 6;}
.b-1-7{grid-column: 1 / span 7;}
.b-1-8{grid-column: 1 / span 8;}
.b-1-9{grid-column: 1 / span 9;}
.b-1-10{grid-column: 1 / span 10;}
.b-1-11{grid-column: 1 / span 11;}
.b-1-12{grid-column: 1 / span 12;}
.b-2-1{grid-column: 2 / span 1;}
.b-2-2{grid-column: 2 / span 2;}
.b-2-3{grid-column: 2 / span 3;}
.b-2-4{grid-column: 2 / span 4;}
.b-2-5{grid-column: 2 / span 5;}
.b-2-6{grid-column: 2 / span 6;}
.b-2-7{grid-column: 2 / span 7;}
.b-2-8{grid-column: 2 / span 8;}
.b-2-9{grid-column: 2 / span 9;}
.b-2-10{grid-column: 2 / span 10;}
.b-2-11{grid-column: 2 / span 11;}
.b-3-1{grid-column: 3 / span 1;}
.b-3-2{grid-column: 3 / span 2;}
.b-3-3{grid-column: 3 / span 3;}
.b-3-4{grid-column: 3 / span 4;}
.b-3-5{grid-column: 3 / span 5;}
.b-3-6{grid-column: 3 / span 6;}
.b-3-7{grid-column: 3 / span 7;}
.b-3-8{grid-column: 3 / span 8;}
.b-3-9{grid-column: 3 / span 9;}
.b-3-10{grid-column: 3 / span 10;}
.b-4-1{grid-column: 4 / span 1;}
.b-4-2{grid-column: 4 / span 2;}
.b-4-3{grid-column: 4 / span 3;}
.b-4-4{grid-column: 4 / span 4;}
.b-4-5{grid-column: 4 / span 5;}
.b-4-6{grid-column: 4 / span 6;}
.b-4-7{grid-column: 4 / span 7;}
.b-4-8{grid-column: 4 / span 8;}
.b-4-9{grid-column: 4 / span 9;}
.b-5-1{grid-column: 5 / span 1;}
.b-5-2{grid-column: 5 / span 2;}
.b-5-3{grid-column: 5 / span 3;}
.b-5-4{grid-column: 5 / span 4;}
.b-5-5{grid-column: 5 / span 5;}
.b-5-6{grid-column: 5 / span 6;}
.b-5-7{grid-column: 5 / span 7;}
.b-5-8{grid-column: 5 / span 8;}
.b-6-1{grid-column: 6 / span 1;}
.b-6-2{grid-column: 6 / span 2;}
.b-6-3{grid-column: 6 / span 3;}
.b-6-4{grid-column: 6 / span 4;}
.b-6-5{grid-column: 6 / span 5;}
.b-6-6{grid-column: 6 / span 6;}
.b-6-7{grid-column: 6 / span 7;}
.b-7-1{grid-column: 7 / span 1;}
.b-7-2{grid-column: 7 / span 2;}
.b-7-3{grid-column: 7 / span 3;}
.b-7-4{grid-column: 7 / span 4;}
.b-7-5{grid-column: 7 / span 5;}
.b-7-6{grid-column: 7 / span 6;}
.b-8-1{grid-column: 8 / span 1;}
.b-8-2{grid-column: 8 / span 2;}
.b-8-3{grid-column: 8 / span 3;}
.b-8-4{grid-column: 8 / span 4;}
.b-8-5{grid-column: 8 / span 5;}
.b-9-1{grid-column: 9 / span 1;}
.b-9-2{grid-column: 9 / span 2;}
.b-9-3{grid-column: 9 / span 3;}
.b-9-4{grid-column: 9 / span 4;}
.b-10-1{grid-column: 10 / span 1;}
.b-10-2{grid-column: 10 / span 2;}
.b-10-3{grid-column: 10 / span 3;}
.b-11-1{grid-column: 11 / span 1;}
.b-11-2{grid-column: 11 / span 2;}
.b-12-1{grid-column: 12 / span 1;}