.projectDescription{
    padding: 2vw;
    display: grid;

    grid-template-columns: 1fr 1fr;
    column-gap: 2vw;

}

b{
    font-weight: 700;
    color: var(--black);
}

a{
    text-decoration: underline;
    color: var(--black);
}


.tags{
    padding: 2vw;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1fr 1fr;
    row-gap: 2vh;
    height: auto;

    border-bottom: 2px solid var(--black);
}

.tag{
    border: solid 2px var(--black);
    padding: 6px 25px 6px 25px;
    border-radius: 100px;

    margin-right: 2vw;
    
}

.contenuProjet{
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

img, video{
    object-fit: cover;
    border-bottom: 2px solid var(--black);
    border-left: 2px solid var(--black);
    width: 100%;
}

.half{
    grid-column: span 2;
}

.full{
    grid-column: span 4;
}

.quarter{
    grid-column: span 1;  
}

.small{
    height: 300px;
}

.big{
    height: 100%;
    width: 100%;
}

.fullHeight{
    width: 100%;
    height: auto;
}


.next_previous{
    display: flex;
    justify-content: space-between;
    width: calc(100vw - var(--headerWidth));
    border: none;
}

.next{
    width: var(--headerWidth);
    border-left: solid 2px var(--black);
    border-right: solid 2px var(--black);
}


.leftArrow{
    transform: rotate(180deg);
}

.nextRound{
    width: var(--headerWidth);
}




.hlContainer{
    width: calc(100vw - 3 * var(--headerWidth));
    display: flex;
    align-items: center;
}

.hl{
    width: 100%;
    border-top: solid 2px var(--black);
}

.nextIcon{
    position: absolute;
}





@media(max-width:  950px){
    .projectDescription{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        row-gap: 4vh;
    }
}

@media(max-width:  480px){
    .contenuProjet{
        grid-template-columns: 1fr;
    }

    .big{
        width: 100%;
    }

    .small{
        height: 200px;
    }

    .half{
        grid-column: span 1;
    }
    
    .full{
        grid-column: span 1;
    }
    
    .quarter{
        grid-column: span 1;  
    }

    img{
        border-left: 0;
        border-right: 0;
    }


    .next_previous{
        width: 100vw;
    }

    .hlContainer{
        width: calc(100vw - 20vh);
    }



    .nextRound{
        width: 10vh;
    }

    .next{
        width: 10vh;
        border-bottom: 0;
    }

   
    .rightRound{
        border-right: 0;
    }
    .leftRound{
        border-left: 0;
    }

    .main{
        padding-bottom: 10vh;
    }
    

    

    
}