/* 
INTRO
*/
#project_p-thumbnail {margin: 2rem 0;}
@media only screen and (min-width: 768px) {
    #project_p-title {grid-column: 1/-1;}
    #project_p-thumbnail.--vertical {grid-column: 1/6;}
    #project_p-thumbnail.--horizontal {grid-column: 1/-3;}
    #project_p-about {grid-column: 1/-1;}
}
@media only screen and (min-width: 1096px) {
    #project_p-title {grid-column: 6/-1; grid-row: 1;}

    #project_p-thumbnail {margin-top: 0;}
    #project_p-thumbnail.--vertical {
        grid-column: 1/5;
        grid-row: 1/4;
        margin-bottom: -6rem;
    }
    #project_p-thumbnail.--horizontal {
        grid-column: 1/-3;
        margin: 10rem 0 6rem;
    }

    #project_p-about {grid-column: 6/-1; grid-row: 2; margin-top: 4rem;}
}


/* 
FEED
*/
#project_p-feed {
    margin-top: 4rem;
    row-gap: 4rem;
}
@media only screen and (min-width: 768px) {
    #project_p-feed {
        margin-top: 6rem;
        row-gap: 6rem;
    }
}
@media only screen and (min-width: 1096px) {
    #project_p-feed {margin-top: 0;}
}


/* 
GALLERY
*/
#project_p-gallery .--container {
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

#project_p-gallery .--container figure {
    scroll-snap-align: center;
}

#project_p-gallery .--container .ratio-5_7 {
    width: fit-content;
    height: 100%;
}

#project_p-gallery .--bullets {
    margin-top: 1rem;
    column-gap: 1rem;
}

.project_p-gallery--bullet {
    width: .5rem;
    height: .5rem;
    border-radius: 1rem;
    background: var(--c-brown);
    opacity: .25;
    transition: 500ms;
}

.project_p-gallery--bullet.--active {opacity: 1;}

@media (hover: hover) {
    .project_p-gallery--bullet:hover {
        opacity: 1;
    }
}


/* 
DESCRIPTION
*/
#project_p-description {margin-top: 2.5rem;}
@media only screen and (min-width: 768px) {
    #project_p-description {margin-top: 4.5rem;}
}
@media only screen and (min-width: 1096px) {
    #product_p-description p {grid-column: 1/8;}
}


/* 
NAV
*/
#project_p-nav {margin-top: 4rem;}
@media only screen and (min-width: 768px) {
    #project_p-nav {margin-top: 6rem;}
}

#project_p-nav .--prev {margin-right: auto;}
#project_p-nav .--next {margin-left: auto;}