html {

    /**/
    /* --positionP : calc(min(80vw, var(--max-wrapper-width)) - calc(3em + var(--chunko))); */
    --positionP : 12vw;
    --positionQ : calc(min(100vw, var(--max-wrapper-width)) - calc(calc(var(--unitB) * 3) + var(--chunko)));

}

.chunk {

    position: relative;

    display: block;
    height: auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
    width: calc(var(--chunko) + 1rem);
    left: 0;
    top: 0;

    & > * {

        background-color: var(--page-bg-color);
    }
}

.exhibit {

    display: block;
    width: 100%;
    margin-bottom: 1rem;
    max-width: calc(1.7 * 100vh);
}

.snapshot {

    display: block;
    width: 100%;
    margin-bottom: 1rem;

    & > img {
        width: 100%;
    }

}

.posP {

    position: relative;
    left: var(--positionP);
}

.posQ {

    position: relative;
    left: var(--positionQ);
}

.video-wrap {

    height: 60vh;
}

/* THE HEIGHTS */

.short {

        min-height: calc(100vmin / 2);
        max-height: calc(100vmin / 2);
}

.medium {

    height: 30rem;

}

.tall {

    height: 30rem;
}

.wide16x9 {

    height: 50cqw;
}

.full-bleed {
    
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}


/* MEDIA QUERIES FOR THIS SET OF RULES */
@media screen and (min-width: 2400px) {

}

@media screen and (max-width: 1200px) {

    html {

        --positionQ: var(--positionP);
    }
        
}
@media screen and (max-width: 800px) {


    html {
        --positionP: 0em;
        --positionQ: 0em;
    }


}
@media screen and (max-width: 600px) {


}
@media screen and (max-width: 400px) {


}