/* 
HEADER
*/
#project_p-header video {opacity: .75;}

#project_p-header .--title {
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: clip;
}

#project_p-title-background {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    filter: blur(6px);
    scale: 1.25;
    z-index: 2;
}

#project_p-header .--title h2 {z-index: 5;}
#project_p-header .--title h3 {
    margin-left: .5em;
    transform: translateY(7px);
    z-index: 5;
}

@media only screen and (min-width: 768px) {
    #project_p-header .--title h3 {transform: translateY(10px);}
}

@media only screen and (min-width: 1024px) {
    #project_p-header {
        min-width: 100vw;
        max-width: 100vw;
        min-height: 100vh;
        max-height: 100vh;
    }

    #project_p-header .--title {padding: .7rem 1.5rem;}

    #project_p-header .--title h3 {transform: translateY(10px);}
}

/* @media (hover: hover) {
    #project_p-header .--octopus:hover img:first-of-type {display: none !important;}
    #project_p-header .--octopus:hover img:last-of-type {display: block !important;}
} */


/* 
DESCRIPTION
*/
#project_p-description {row-gap: 1rem;}
#project_p-description > * {grid-column: 1/-1;}

#project_p-description .--labels {
    column-gap: .25rem;
    row-gap: .25rem;
}
#project_p-description .--labels * {
    border: 1px solid white;
    padding: 4px 8px;
    border-radius: 1rem;
}


#project_p-achievments {
    column-gap: 1rem;
    row-gap: 1rem;
    margin-top: 2rem;
}
#project_p-achievments .--achievment {
    grid-column: span 2;
    height: fit-content;
    background: rgba(255, 255, 255, .075);
    padding: .6rem .7rem .9rem;
    border-radius: .25rem;
}

@media only screen and (min-width: 768px) {
    #project_p-description {padding-top: 2rem;}
    #project_p-achievments {margin-top: 4rem;}
    #project_p-achievments .--achievment {padding: .85rem 1rem 1.2rem;}
}

@media only screen and (min-width: 1024px) {
    #project_p-description .--headline {grid-column: 3/-1; grid-row: 1;}
    #project_p-description .--labels {grid-column: 3/-1; grid-row: 2;}
    #project_p-description .--description {grid-column: 3/-1; grid-row: 3;}

    #project_p-achievments {
        margin-top: 0;
        grid-column: 1/3;
        grid-row: 1/5;
        padding: 0 4rem 0 2rem;
        column-gap: .5rem;
        row-gap: .5rem;
    }
}


@media (hover: hover) {
    #project_p-achievments .--achievment {
        background: transparent !important;
        transition: 500ms ease-in-out;
    }

    #project_p-achievments .--achievment:hover {background: rgba(255, 255, 255, .075) !important;}
}


/* 
FEED
*/
#project_p-feed {margin-top: 2rem;}
@media only screen and (min-width: 768px) {
    #project_p-feed {margin-top: 4rem;}
    #project_p-feed > * {margin-bottom: 4rem;}
}


/* 
RELATED
*/
#project_p-related {
    margin-top: 5rem;
    row-gap: 1rem;
}
#project_p-related > * {grid-column: 1/-1;}
@media only screen and (min-width: 768px) {
    #project_p-related {margin-top: 8rem;}
    #project_p-related div {grid-column: span 2;}
}
@media only screen and (min-width: 1024px) {
    #project_p-related {margin-top: 12rem;}
}