:root {
    /* Colors */
    --color-dark: #1f1f1f;
    --color-light: #E5E2DC;
    --color-accent: #0D3E38;
    --color-grytxt: #AAAAAA;
    /* Font families */
    --font-primary: "Zalando Sans", sans-serif;
    --font-display: "Playfair Display", serif;
    /* Font sizes */
    --fs-sm: 1.4rem; /*14px equivalent*/
    --fs-md: 1.6rem; /*16px equivalent*/
    --fs-lg: 3.2rem; /*32px equivalent*/
}



/* DISPLAY SWAPS */
.project-info-mobile{
    display: none;
}



/* HERO */
.img-cover{
    width: 100%;
    height: 100dvh;
    object-fit: cover;
}



/* MAIN CONTAINERS */
#wrapper{
    width: 75dvw;
    margin: 0 auto;
    margin-top: 1.5em;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.project-info{
    display: grid;
    width: 100%;
    grid-template-columns: 0.8fr 1fr 0.5fr;
    grid-template-areas:
        "hr1 hr1 hr1"
        "title desc btn"
        "hr2 hr2 hr2"
        "category stack year";
    column-gap: 3em;
    row-gap: 1.5em;
}
.section{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 8em 0;
    gap: 6em;
}



/* PROJECT INFO */
.pi-hr1{
    grid-area: hr1;
}
.pi-title{
    grid-area: title;
}
.pi-desc{
    grid-area: desc;
    text-align: justify;
    margin-right: 2em;
}
.pi-btn{
    grid-area: btn;
    display: flex;
    align-items: start;
    justify-content: start;
    height: min-content;
    gap: 2em;
}
.pi-btn a{
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-light);
    gap: 0.5em;
}
.pi-btn a p{
    font-size: var(--fs-sm);
    cursor: pointer;
}
.pi-btn a img{
    height: 10px;
    cursor: pointer;
}
.pi-hr2{
    grid-area: hr2;
}
.pi-category, .pi-stack, .pi-year{
    color: var(--color-grytxt);
    font-size: var(--fs-sm);
}
.pi-category{
    grid-area: category;
}
.pi-stack{
    grid-area: stack;
}
.pi-year{
    grid-area: year;
}




/* MODULES */
.module-textblock, .module-img-full, .module-img-grid, .module-img-halves{
    width: 100%;
}

.module-textblock{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.module-textblock p, .module-txt-half p{
    text-align: justify;
}

.module-grid-carrousel-base img, .module-img-full img, .module-img-half img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
    border-radius: 4px;
}
.module-grid-carrousel-base{
    display: grid;
    width: 100%;
    column-gap: 1em;
}

.module-img-full img{
    aspect-ratio: 1.78 / 1;
}

.module-img-grid{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.module-grid-carrousel-base {
    grid-template-columns: repeat(3, 1fr);
}
.module-grid-carrousel-base img {
    aspect-ratio: 4 / 3;
}

.module-img-halves{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3em;
}
.module-img-half img{
    height: auto;
    aspect-ratio: 1 / 1;
}
.module-txt-half{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.module-txt-half em{
    font-size: small;
}



/* ------------------------------------------------------------- */
/* ------------------------- VIEWPORTS ------------------------- */
/* ------------------------------------------------------------- */

/* --- MID SIZE: ~1,250px and below --- */
@media (max-width: 78em) {
    /*.body{background-color: red;}*/
    .section{
        width: 100%;
    }
    .project-info{
        grid-template-columns: 0.8fr 1fr 0.4fr;
        column-gap: 2.5em;
    }

    .pi-btn{
        flex-direction: column;
        align-items: end;
        gap: 1em;
    }
    .pi-year{
        justify-self: end;
        text-align: end;
    }

    .module-img-halves{
        grid-template-columns: 1fr 1.5fr;
        column-gap: 1.5em;
    }
}

/* --- TABLET: ~768px and below --- */
@media (max-width: 48em) {
    /*.body{background-color: brown;}*/
    #wrapper{
        width: 85dvw;
        margin-top: 0;
    }
    .project-info{
        display: none;
    }
    .img-cover{
        display: none;
    }

    .project-info-mobile{
        display: flex;
        flex-direction: column;
        width: 85dvw;
        margin: 0 auto;
        box-sizing: border-box;
        gap: 2em;
    }
    .project-info-mobile-top{
        height: 100dvh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        box-sizing: border-box;
        padding-top: 10em;
        gap: 1.2em;
    }
    .pi-mobile-title{
        font-size: var(--fs-lg);
        width: 55%;
        margin-right: auto;
    }
    .pi-mobile-top-grid{
        display: grid;
        grid-template-columns: 1fr 0.4fr;
        column-gap: 4em;
        margin-bottom: 1em;
    }
    .pi-mobile-category{
        justify-self: end;
        color: var(--color-grytxt);
    }
    .pi-mobile-cover{
        width: 100dvw;
        height: 100%;
        object-fit: cover;
    }
    .project-info-mobile-bottom{
        display: grid;
        grid-template-columns: 1fr 1fr;
        color: var(--color-grytxt);
    }
    .pi-mobile-btn{
        justify-self: end;
        display: flex;
        gap: 3em;
    }
    .pi-mobile-btn a{
        display: flex;
        text-decoration: none;
        align-items: center;
        font-size: var(--fs-md);
        gap: 0.4em;
    }
    .pi-mobile-btn p{
        text-decoration: none;
        color: var(--color-light);
        font-weight: 500;
        font-size: var(--fs-md);
        color: var(--color-grytxt);
    }
    .pi-mobile-btn img{
        justify-self: end;
        height: 0.75em;
    }

    .module-img-grid{
        gap: 0.75em;
    }
    .module-img-full img{
        aspect-ratio: 4/3;
    }
    .module-grid-carrousel-base{
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.75em;
        row-gap: 0.75em;
    }
    .module-img-halves{
        grid-template-columns: 1fr;
        gap: 2em;
    }
    .module-img-half{
        order: 2;
    }
    .module-img-half img{
        aspect-ratio: 4/3;
    }
    .module-txt-half{
        order: 1;
    }
}

/* --- MOBILE: ~480px and below --- */
@media (max-width: 31em) {
    /*.body{background-color: #0D3E38;}*/

    #wrapper{
        width: 90dvw;
    }

    .project-info-mobile{
        width: 90dvw;
    }

    .module-txt-half em{
        font-size: smaller;
    }

    .pi-mobile-title{
        font-size: 1.8em;
        width: 60%;
    }

}

/* --- MINI: ~360px and below --- */
@media (max-width: 20em) {
    /*.body{background-color: brown;}*/

    .pi-mobile-title{
        width: 100%;
    }
    .pi-mobile-desc{
        text-align: justify;
    }
    .pi-mobile-top-grid{
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        row-gap: 2em;
    }
    .pi-mobile-category{
        justify-self: start;
    }
    .project-info-mobile-bottom{
        column-gap: 1em;
    }
    .pi-mobile-btn{
        gap: 1.2em;
    }

    .module-img-full img{
        aspect-ratio: 1/1;
    }
    .module-img-half img{
        aspect-ratio: 1/1;
    }

}