#work_p-nav {
    right: 1rem;
    bottom: 1rem;
    z-index: 100;
}


/* 
MAIN
*/
#work_p-info,
#work_p-photography,
#work_p-booklet {min-height: 90vh;}

.work_p-section:last-of-type {min-height: calc(var(--vh) * 100);}
.work_p-section:not(:last-of-type) {margin-bottom: 16rem;}

.work_p-section > h3 {padding: 0 1rem;}

@media only screen and (min-width: 1024px) {
    #work-page {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
    }

    .work_p-section {
        min-height: 100vh !important;
        max-height: 100vh !important;
        scroll-snap-align: center;
        overflow-y: hidden
    }

    #work_p-drawings,
    #work_p-before_after {overflow-y: auto !important;}

    .work_p-section:not(:last-of-type) {margin-bottom: 0;}
}




/* 
INFO
*/
.work_p-info-column {grid-column: 1/-1;}

#work_p-info .--info-thumb figcaption {padding: 4px 1rem;}

.work_p-map--marker {
    width: 10px;
    height: 10px;
    background: black;
    outline: 1px solid white;
}

.work_p-list--containers > div:not(:last-of-type) {margin-bottom: 2em;}

.work_p-list--entry > p {grid-column: 1/-1;}
.work_p-list--entry > span:nth-of-type(odd) {grid-column: 1/3;}
.work_p-list--entry > span:nth-of-type(even) {grid-column: 3/-1;}

@media only screen and (min-width: 768px) {
    #work_p-info--info {
        grid-column: 1/13;
        grid-row: 1/4;
        position: sticky;
        top: var(--header-t);
        min-height: calc(100vh - var(--header-t));
        max-height: calc(100vh - var(--header-t));
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #work_p-info--info>div:first-of-type {
        margin-top: 0;
        padding-top: 0;
        flex-grow: 1;
        overflow-y: auto;
    }

    #work_p-info--info>div:last-of-type {
        margin-top: 0 !important;
    }

    #work_p-info--pic {
        grid-column: 13/-1;
        grid-row: 1;
        height: fit-content;
    }

    #work_p-info--details {
        grid-column: 13/-1;
        grid-row: 2;
        height: fit-content;
    }
}

@media only screen and (min-width: 1024px) {
    #work_p-info--info {
        grid-column: 1/7;
        grid-row: 1;
        top: var(--header-d);
        min-height: calc(100vh - var(--header-d));
        max-height: calc(100vh - var(--header-d));
    }

    #work_p-info--details {
        grid-column: 7/13;
        grid-row: 1;
        padding-top: 0 !important;
        min-height: calc(100vh - var(--header-d));
        max-height: calc(100vh - var(--header-d));
        overflow-y: auto;
    }

    #work_p-info--pic {
        grid-column: 13/-1;
        grid-row: 1;
        min-height: calc(100vh - var(--header-d));
        max-height: calc(100vh - var(--header-d));
        overflow-y: auto;
    }
    #work_p-info .--info-thumb figcaption {padding-left: 0;}
}

@media (hover: hover) {
    #work_p-info .--info-thumb figcaption a,
    #work_p-map--google,
    .--cloud,
    .work_p-references a {transition: 200ms ease-in-out;}

    #work_p-info .--info-thumb figcaption a:hover {color: black !important;}

    #work_p-map--google:hover,
    .--cloud:hover,
    .work_p-references a:hover {color: var(--c-gray) !important;}
}



/* 
DRAWINGS
*/
#work_p-drawings {
    min-width: 100vw;
    max-width: 100vw;
}
#work_p-drawings h4 {padding: 0 1rem;}
.work_p-drawings--container {
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vw;
    max-height: 100vw;
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    padding: 1rem 50vw;
    margin-bottom: 1rem;
}

.work_p-drawings--container .--media {
    width: auto;
    height: calc(100vw - 2rem);
    border: 1px solid var(--c-light);
    scroll-snap-align: center;
}
.work_p-drawings--container .--media:not(:last-of-type) {margin-right: 1rem;}

@media only screen and (min-width: 768px) {
    .work_p-drawings_d--container {grid-column: span 8;}

    .work_p-drawings_d--container .--hide {opacity: 0;}
    .work_p-drawings_d--container .--media {
        margin: .5rem 0 4rem;
        border: 1px solid var(--c-light);
    }
}

@media only screen and (min-width: 1024px) {
    .work_p-drawings_d--container {
        grid-column: span 4;
    }
}




/* 
PHOTOGRAPHY
*/
#work_p-photography--container {
    min-width: 100vw;
    max-width: 100vw;
    min-height: calc(100% - 6rem);
    max-height: calc(100% - 6rem);
    flex-grow: 1;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
}

#work_p-photography--container .--picture {
    min-width: 100vw;
    max-width: 100vw;
    min-height: calc(100% - 6rem);
    max-height: calc(100% - 6rem);
    scroll-snap-align: start;
}

#work_p-photography--container .--picture .--media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

#work_p-photography--container .--picture figcaption {
    padding: 3px 1rem;
}

#work_p-photography--nav {
    height: fit-content;
    overflow-y: hidden;
    overflow-x: auto;
}
#work_p-photography--nav button.--active {opacity: .25;}
#work_p-photography--nav .--thumb {
    width: auto;
    height: 6rem;
}

@media only screen and (min-width: 1024px) {
    #work_p-photography {flex-direction: row;}
    #work_p-photography--container {cursor: e-resize !important;}

    #work_p-photography--container,
    #work_p-photography--container .--picture {
        min-width: calc(100vw - 6rem);
        max-width: calc(100vw - 6rem);
        min-height: calc(100vh - var(--header-d));
        max-height: calc(100vh - var(--header-d));
    }

    #work_p-photography--container .--picture .--media {
        height: calc(100% - 1.6666rem);
        object-position: left top;
    }

    #work_p-photography--nav {
        flex-direction: column;
        min-height: calc(100vh - var(--header-d));
        height: calc(100vh - var(--header-d));
        max-height: calc(100vh - var(--header-d));
        overflow-y: auto;
        overflow-x: hidden;
    }

    #work_p-photography--nav .--thumb {
        width: 6rem;
        height: auto;
    }
}
@media (hover: hover) {
    #work_p-photography--nav button {transition: 200ms ease-in-out;}
    #work_p-photography--nav:hover button {opacity: .25;}
    #work_p-photography--nav button:hover {opacity: 1;}
}




/* 
BEFORE/AFTER
*/
#work_p-before_after .--figure {
    min-width: calc(100vw - 8rem);
    max-width: calc(100vw - 8rem);
    min-height: calc(100vw - 8rem);
    max-height: calc(100vw - 8rem);
    border-radius: 4px;
    cursor: ew-resize !important;
}
#work_p-before_after .--figure:not(:last-of-type) {margin-bottom: 4rem;}

#work_p-before_after .--before,
#work_p-before_after .--after {
    user-drag: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

#work_p-before_after .--before {top: 0; right: 50%; bottom: 0; left: 0; object-position: center left; width: 50%;}
#work_p-before_after .--after {top: 0; right: 0; bottom: 0; left: 50%; object-position: center right; width: 50%;}

@media only screen and (min-width: 768px) {
    #work_p-before_after .--figure {
        min-width: unset;
        max-width: unset;
        min-height: unset;
        max-height: unset;
        grid-column: span 12;
        margin-bottom: 1rem !important;
    }
}

@media only screen and (min-width: 1024px) {
    #work_p-before_after {
        padding: calc(var(--header-d) + 2rem) 2rem 2rem;
        column-gap: 2rem;
        row-gap: 2rem;
    }
    #work_p-before_after .--figure {grid-column: span 6;}
}


/* 
BOOKLET
*/
#work_p-booklet--container {
    max-height: 100vh;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 50vw;
}

#work_p-booklet--container > canvas {
    width: auto;
    max-width: calc(100vw - 4rem) !important;
    height: fit-content !important;
    max-height: calc(100vh - var(--header-m) - 6rem);
    margin: auto .5rem;
    object-fit: contain;
    scroll-snap-align: center;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.025);
    -webkit-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.025);
    -moz-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.025);
}

#work_p-booklet--counter {
    left: 1rem;
    bottom: 1rem;
    z-index: 5;
}

@media only screen and (min-width: 768px) {
    #work_p-booklet--container>canvas {
        max-width: calc(100vw - 8rem) !important;
    }
}

@media only screen and (min-width: 1024px) {
    #work_p-booklet--container>canvas {
        max-width: calc(100vw - 16rem) !important;
        max-height: 75vh;
    }
}

@media only screen and (min-width: 2048px) {
    #work_p-booklet--container > canvas {
        max-width: 60vw !important;
        max-height: 75vh;
    }
}