.project-page > * {grid-column: 1/-1;}


/* 
TITLE
*/
#project_p-title {
    top: 2.25rem;
    left: .25rem;
    right: .25rem;
    z-index: 100;
}
@media only screen and (min-width: 1024px) {
    #project_p-title {
        top: .25rem;
        left: calc(calc(100vw / 9 * 7) + .25rem);
    }

    #project_p-title span {display: none;}
}


/* 
ASIDE
*/
#project_p-aside {
    width: 100%;
    min-height: calc(var(--vh) * 100);
    max-height: calc(var(--vh) * 100);
    padding-top: 4.3rem;
    padding-bottom: 2.25rem;
    z-index: 80;
    translate: 0 -100%;
}
@media only screen and (min-width: 1024px) {
    #project_p-aside {
        left: calc(100vw / 9 * 7);
        padding-top: 2.25rem;
        padding-bottom: .25rem;
        width: fit-content;
        translate: 0 0;
        background: rgba(0, 0, 0, 1);
    }
}

#project_p-aside-description {
    flex-grow: 1;
    overflow-y: auto;
    height: 100%;
}


/* 
FEED
*/
@media only screen and (min-width: 1024px) {
    #project_p-feed {
        grid-column: 1/-3;
    }
}
.project_p-row.grid-1 > *,
.project_p-row.grid-2 > *,
.project_p-row.grid-3 > * {grid-column: 1/-1;}
.project_p-row.grid-4 > *{ grid-column: span 2;}
@media only screen and (min-width: 1024px) {
    .project_p-row.grid-1 > *,
    .project_p-row.grid-2 > *,
    .project_p-row.grid-3 > *,
    .project_p-row.grid-4 > * {grid-column: span 1;}
}

/* Gallery */
.project_p-gallery-container {
    scroll-snap-type: x mandatory;
    overflow-y: hidden;
    overflow-x: auto;
}
.project_p-gallery-container > * {scroll-snap-align: center;}

/* Nav Buttons */
.project_p-gallery-nav {
    bottom: 1rem;
    z-index: 10;
}

.project_p-gallery-button {width: 1.65rem; height: 1.65rem; margin: 0 .25rem}
.project_p-gallery-button.--active {background: var(--c-clear);}

/* Nav Overlay */
.project_p-gallery-overlay {z-index: 5;}
.project_p-gallery-overlay button {
    width: 50%;
    height: 100%;
}
@media only screen and (min-width: 1024px) {
    .project_p-gallery-overlay {display: flex !important;}
}


/* RELATED */
#project_p-related .project-block > img,
#project_p-related--desktop .project-block > img,
#project_p-related .project-block > video,
#project_p-related--desktop .project-block > video {
    height: calc(calc(9 * 100vw) / 16);
}
@media only screen and (min-width: 1024px) {
    #project_p-related .project-block>img,
    #project_p-related--desktop .project-block > img,
    #project_p-related .project-block > video,
    #project_p-related--desktop .project-block>video {
        height: calc(calc(9 * calc(100vw / 9 * 2)) / 16);
    }
}