/* LAYOUT */

:root{
    --outerwidth: 100vw
}

@media (min-width: 1920px){
    :root{
        --outerwidth: 1920px
    }
}

section.row{
    width: 100%;
    padding-left: calc((var(--outerwidth) - var(--innerwidth)) * .5);
    padding-right: calc((var(--outerwidth) - var(--innerwidth)) * .5);
    margin: var(--space) 0;
}

section.row.full, div.row{
    width: 100%;
    padding: 0;
}

section.row.right{
    width: 100%;
    padding-right: 0;
}

section.row.left{
    width: 100%;
    padding-left: 0;
}

section.row.center{
    align-items: center;
    justify-content: center;
}

.row.centerX{
    justify-content: center;
}

.row.centerY{
    align-items: center;
}


.row {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    margin: 0 calc(-1 * var(--space));
}

.row>div {
    padding: 0 var(--space);
}

.row>div {
    --f1: 12;
    --f2: 12;
    --f3: 12;
    --f4: 12;
    --f5: 12;
    --f6: 12;
    --f7: 12;
    --f8: 12;
    --f9: 12;
    --f10: 12;
    --f11: 12;
    --f12: 12;
}

@media (min-width: 1200px) {
    .row>div {
        --f1: 1;
        --f2: 2;
        --f3: 3;
        --f4: 4;
        --f5: 5;
        --f6: 6;
        --f7: 7;
        --f8: 8;
        --f9: 9;
        --f10: 10;
        --f11: 11;
        --f12: 12;
    }
}



.row > .f1{width:                       calc(100% / 12 * var(--f1));}
.row > .f2{width:                       calc(100% / 12 * var(--f2));}
.row > .f3{width:                       calc(100% / 12 * var(--f3));}
.row > .f4{width:                       calc(100% / 12 * var(--f4));}
.row > .f5{width:                       calc(100% / 12 * var(--f5));}
.row > .f6{width:                       calc(100% / 12 * var(--f6));}
.row > .f7{width:                       calc(100% / 12 * var(--f7));}
.row > .f8{width:                       calc(100% / 12 * var(--f8));}
.row > .f9{width:                       calc(100% / 12 * var(--f9));}
.row > .f10{width:                      calc(100% / 12 * var(--f10));}
.row > .f11{width:                      calc(100% / 12 * var(--f11));}
.row > .f12{width:                      calc(100% / 12 * var(--f12));}
.row > .auto{width:                     auto;}