/* UTILITIES */
/**********************************************/

:root {

    /* rem sizes */
    font-size: 10px;

    /* 9-col pisha (fluted) grid */
    --maximum-grid-width: min(100vw, 1280px);
    --pisha-gutter: 1.25%;
    --pisha-col-1: 10%;
    --pisha-col-2: 21.25%;
    --pisha-col-3: 32.5%;
    --pisha-col-6: 66.25%;
    --pisha-col-9: 100%;

    --french-tuck: calc(5rem + 1vw);

    /* color variables */
    --ground: #060d0d;
}


.fullWidth {
    width: 100%;
}
.widthFull {
    position: relative;
    width: var(--pisha-col-9);
}
.width2th {
    position: relative;
    width: var(--pisha-col-6);
}
.width1th {
    position: relative;
    width: var(--pisha-col-3);
}
.fullHeight {
    position: relative;
    height: 100%;
}
.heightFull {
    position: relative;
    height: 100vh;
}
.heightTall {
    position: relative;
    height: 80vh;
}
.heightMedium {
    position: relative;
    height: 60vh;
}
.heightShort {
    position: relative;
    height: max(30vh, 300px);
}


.heightRespUltra {
    height: calc(var(--maximum-grid-width) * .450);
}
.heightRespWide {
    height: calc(var(--maximum-grid-width) * .569);
}
.heightRespStd {
    height: calc(var(--maximum-grid-width) * .750);
}


.floatRight {
    position: relative;
    display: inline-block;
    float: right;
}

.floatLeft {
    position: relative;
    display: inline-block;
    float: left;
}

.clearFix {
    display: inline-block;
    &::after {
        clear: both;
    }
}

.flexThirds {

    display: flex;
    flex-flow: column wrap;
    padding: 0;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    column-gap: var(--pisha-gutter);

    &.flexEnd {
        align-items: flex-end;
    }

    & > * {
        width: var(--pisha-col-3);
        flex: auto 0 1;
    }
}



@media screen and (max-width: 900px) {
    /* SMALLER SCREENS */
    
    .heightFull {
        height: auto;
        min-height: 100vh;
    }
    .heightTall {
        position: relative;
        height: auto;
    }
    .heightMedium {
        height: auto;
    }
    .heightShort {
        height: auto;
    }


}