/* LAYOUT */

:root{
    --outerwidth: 100vw;
}

@media (min-width: 2560px){
    :root{
        --outerwidth: 100vw;
        --innerwidth: 2000px;
    }
}

@media (max-width: 800px){
    :root{
        --space: 3rem
    }
}


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

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

div.row{
    padding: 0;
    margin: 0 calc(-0.5 * var(--space));
}

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;
    /* justify-content: center; */
}


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

.row.fullHeight {
    min-height: 60rem;
    height: 100vh;
}

.row>div {
    display: flex;
    flex-flow: column;
    padding: 0 var(--space);
    padding: var(--space) var(--space) 0 var(--space);
}

@media (max-width: 1200px){
    .row>div {
        /* padding: 0 var(--space); */
    }

    section.row{
        margin: var(--space) 0 0;
        margin: 0;
    }
}

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

.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; flex-grow: 1; flex-shrink: 1;}

.row > [f="1"]{width:                       calc(100% / 12 * var(--f1));}
.row > [f="2"]{width:                       calc(100% / 12 * var(--f2));}
.row > [f="3"]{width:                       calc(100% / 12 * var(--f3));}
.row > [f="4"]{width:                       calc(100% / 12 * var(--f4));}
.row > [f="5"]{width:                       calc(100% / 12 * var(--f5));}
.row > [f="6"]{width:                       calc(100% / 12 * var(--f6));}
.row > [f="7"]{width:                       calc(100% / 12 * var(--f7));}
.row > [f="8"]{width:                       calc(100% / 12 * var(--f8));}
.row > [f="9"]{width:                       calc(100% / 12 * var(--f9));}
.row > [f="10"]{width:                      calc(100% / 12 * var(--f10));}
.row > [f="11"]{width:                      calc(100% / 12 * var(--f11));}
.row > [f="12"]{width:                      calc(100% / 12 * var(--f12));}
.row > [f="auto"]{width:                    auto; flex-grow: 1; flex-shrink: 1;}




/* .row > div > *:first-child{margin-top: var(--space);} */

.row {padding-top: var(--space);}


















.grid{
    --gap: var(--space);
    --columnCount: 9;
    --rowCount: 6;
    --nettoGridWidth: calc(100vw - (var(--outerwidth) - var(--innerwidth)));
}

/*  */

.grid{
    display: grid;
    width: 100vw;
    grid-template-rows: repeat(auto-fill, calc(100vh / var(--rowCount)));
    grid-template-columns: repeat(var(--columnCount), calc(var(--nettoGridWidth) / var(--columnCount)));
    grid-auto-columns: auto;
    gap: 0;
    padding-right: calc((var(--outerwidth) - var(--innerwidth)) * .5);
    padding-left: calc((var(--outerwidth) - var(--innerwidth)) * .5);
}



.grid > div{
    display: flex;
    flex-flow: column;
    padding: var(--space) var(--space) 0 var(--space);
    /* overflow: hidden; */
}

.grid > div::after{
    position: absolute;
    content: '';
    left: 0.5rem;
    top: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    /* background: linear-gradient(0deg, green, transparent); */
    background: #1111;
}

.grid > div > *:last-child{
    margin-bottom: 0;
}


[gh="1"]{grid-row-end: span 1;}
[gh="2"]{grid-row-end: span 2;}
[gh="3"]{grid-row-end: span 3;}
[gh="4"]{grid-row-end: span 4;}
[gh="5"]{grid-row-end: span 5;}

[gw="1"]{grid-column-end: span 1;}
[gw="2"]{grid-column-end: span 2;}
[gw="3"]{grid-column-end: span 3;}
[gw="4"]{grid-column-end: span 4;}
[gw="5"]{grid-column-end: span 5;}

[gy="1"]{grid-row-start: 1;}
[gy="2"]{grid-row-start: 2;}
[gy="3"]{grid-row-start: 3;}
[gy="4"]{grid-row-start: 4;}
[gy="5"]{grid-row-start: 5;}

[gx="1"]{grid-column-start: 1;}
[gx="2"]{grid-column-start: 2;}
[gx="3"]{grid-column-start: 3;}
[gx="4"]{grid-column-start: 4;}
[gx="5"]{grid-column-start: 5;}






@media (max-width: 1000px){
    .grid{
        display: flex;
        flex-flow: column;
    }
}



.absolutePos{
    display: block;
    height: 100vh;
    width: 100%;
    width: calc(100% - (var(--outerwidth) - var(--innerwidth)));
    max-width: calc(100vw - var(--space) * 2);
    min-height: 1080px;
    /* padding-right: calc((var(--outerwidth) - var(--innerwidth)) * .5); */
    /* padding-left: calc((var(--outerwidth) - var(--innerwidth)) * .5); */
}

.absolutePos > div{
    position: absolute;
    /* transform: translate(-50%); */
}

@media (max-width: 1000px){
.absolutePos > div{
    position: relative;
    width: 100%;
    top: auto!important;
    left: auto!important;
    /* transform: translate(-50%); */
}
}