body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 100px;
}

.intro{
    margin-top: 100px;    
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
    border-bottom: 1px solid #5A5A5A;
}

.intro h2{
    font-family: "Urbanist";
    font-weight: 600;    
}

.project-body h3{
    font-family: "Urbanist";
    font-weight: 700;
    font-size: 20px;
}

@media (orientation: portrait) {
    .intro h2
    {
        font-size: 12vw;
    }

    .intro{
        width: 90%;
    }

    .project-body{
        width: 90%;
    }
}
@media (orientation: landscape) {
    .intro h2
    {
        font-size: 6vw;
        
    }

    .intro{
        width: 60%;
    }

    .project-body{
        width: 60%;
    }
}

.topics{
    color:#363636;
    font-weight: 600;
}

.project-body{    
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.project-body .project-body-paragraph{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-body .project-body-paragraph img{
    width: 80%;
    height: auto;
}

.project-body .project-body-paragraph h3{
    width: 100%;
}

.project-body .project-body-paragraph p{
    width: 100%;
}

.project-body .project-body-paragraph .text-image{
    display: flex;
    align-items: flex-start;
}

@media (orientation: landscape) and (min-width:1100px){
    .project-body .project-body-paragraph .text-image img.on_portrait{
        transform: scale(0);
        width: 0;
    }
    .project-body .project-body-paragraph .text-image{
        flex-direction: row;
        gap: 50px;
    }  
    .project-body .project-body-paragraph .text-image p{
        width: 70%;
    } 
    .project-body .project-body-paragraph .text-image img{
        width: 30%;
        height: auto;
    }     
    .project-body .project-body-paragraph .text-image .text{
        width: 70%;
    }     
    .project-body .project-body-paragraph .text-image .text p{
        width: 100%;
    } 
    .project-body .project-body-paragraph .text-image .text img{
        width: 100%;
    } 
}

@media (orientation: portrait) or (max-width:1100px){
    .project-body .project-body-paragraph .text-image img.on_landscape{
        transform: scale(0);
        height: 0;
    }
    .project-body .project-body-paragraph .text-image{
        flex-direction: column;
    }    
    .project-body .project-body-paragraph .text-image img{
        width: 100%;
    }   
}

.image-label{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--title-color);
}

@media (orientation: landscape){
    .image-label{
        font-size: 1vw;
    }
    .image-label span{
        width: 50%;
    }
}

@media (orientation: portrait){
    .image-label{
        font-size: 3vw;
    }
    .image-label span{
        width: 100%;
    }
}

.image-label span{
    text-align: center;
}



.cta{
    width: 100%;
    text-align: left;
}

.go-back{
    margin-bottom: 100px;
    color: var(--title-color);
    font-weight: 900;
}

/******* GALLERY ********/
@media (orientation: landscape){
    .gallery {
        width: 100%;
        height: 60vw;
        display: grid;
        grid-template-columns: 33.33% 33.33% 33.33%;
        gap:10px
    }

    .gallery-item {
        overflow: hidden;
        
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .project-body .project-body-paragraph .gallery img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .item-tall {
        grid-row: span 2;
        object-fit: contain;
    }
}

@media (orientation: portrait){
    .gallery{
        width: 100vw;
        display: flex;
        flex-direction: column;
    }
    .project-body .project-body-paragraph .gallery img,
    .project-body .project-body-paragraph .gallery video{
        width: 100%;
        height: 100vw;
        object-fit: cover;
    }
    .project-body .project-body-paragraph .gallery video:fullscreen{
        object-fit: contain;
    }

    .project-body .project-body-paragraph .gallery img.gallery-item.item-tall {
        height: 100vh;
        object-fit: contain;
    }
}