#project-header {
    background: var(--c_black);
    row-gap: var(--size);
}

#project_h-year,
#project_h-details dt {grid-column: 1/2;}

#project_h-services,
#project_h-details dd {grid-column: 2/-1;}

#project-header > button {
    top: var(--size);
    right: var(--size);
}

#project_h-slides button {transition: opacity 200ms ease-in-out;}
#project_h-slides button:not(.--active) {opacity: var(--alpha);}

@media only screen and (min-width: 1096px) {
    #project_h-slides {background: var(--c_black);}
    #project_h-slides > ul {
        grid-column: 2/-1;
        column-gap: var(--size_s);
        row-gap: var(--size_xs);
    }
}


#project_h-description {background: var(--c_black);}
#project_h-description[data-status="close"] {height: 0;}

/* 
PAGE
*/
#project-page {padding-top: 50dvh;}
@media only screen and (min-width: 768px) {
    #project-page {padding-top: 0;}
}


@media only screen and (min-width: 1096px) {
    #project_p-slides {
        min-height: 100dvh;
        max-height: 100dvh;
        min-width: 100vw;
        max-width: 100vw;
    }
}


@media only screen and (min-width: 768px) {
    .project_p-slide.--2col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 1096px) {
    .project_p-slide {
        min-width: 100vw;
        max-width: 100vw;
        min-height: 100dvh;
        max-height: 100dvh;
    }
}

.project_p-slide figure {width: 100%;}

.project_p-slide figure.ratio-full {
    min-height: 100dvh;
    max-height: 100dvh;
}
@media only screen and (min-width: 1096px) {
    .project_p-slid.--1col figure {
        min-width: 100%;
        min-height: 100%;
        aspect-ratio: unset !important;
    }

    /* .project_p-slid.--2col figure {
        min-width: 100%;
        min-height: 100%;
        aspect-ratio: unset !important;
    } */

    .project_p-slide .media-contain {padding: var(--size_l);}
}

/* #project_p-slides > nav {display: none !important;} */
#project_p-slides > nav button {
    width: 50%;
    height: 100%p;
}
@media (hover: hover) {
    #project_p-slides > nav {display: flex !important;}
}


#project_p-related {margin-top: var(--size_xxl);}
@media only screen and (min-width: 768px) {
    #project_p-related {margin-top: var(--size_xxxl);}
}

#project_p-related h3 {
    grid-column: 1/-1;
    column-gap: var(--size_s);
    margin-bottom: var(--size_s);
}

#project_p-related .--bullet {
    width: .8rem;
    height: .8rem;
    background: var(--c_black);
}

#project_p-related--container {row-gap: var(--size_m);}
#project_p-related--container li {grid-column: span 1;}


@media (hover: hover) {
    #project-header > button {transition: opacity 200ms ease-in-out;}

    #project-header > button:hover {opacity: var(--alpha);}
    #project_h-slides button:not(.--active):hover {opacity: 1 !important;} 
}