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

#project_p-header .--title {
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

#project_p-header .--title img {
    width: auto;
    height: 3rem;
    margin: 0 -.3rem 0 -.3rem;
}

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

@media only screen and (min-width: 768px) {
    #project_p-header .--title img {
        height: 5rem;
        transform: translateY(-.25rem);
        margin: 0 -.5rem 0 -0.75rem;
    } 

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

@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;}
}

@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;}
}