#Titre {
    width: 90vw;
    height: auto;

    display: grid;
    grid-template: auto / repeat(12, 1fr);
    gap: 1vw;
    align-items: end;
}

#Hello {
    width: auto;
    height: auto;
    grid-column: 1/span 4;
}

#Hugo {
    width: auto;
    height: auto;
    grid-column: 5 / span 5;
}

#Statut {
    width: auto;
    height: auto;
    padding: 1.5vh 0 1.5vh 0;
    grid-column: 10 /span 3;

    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 2vh;
}

#abstract {
    width: 90vw;
    height: 40vh;
    object-fit: cover;
}

#interest>section>div>p {
    font-size: 8vw;
    font-weight: 500;
    line-height: 8vw;
    color: #3D3D3D;
}

#interest > section {
    width: 100%;
    display: grid;
    grid-template: repeat(4, 1fr), repeat(12, 1fr);

}

#interest>section>div {
    display: flex;
    flex-direction: row;
    align-content: end;
}

#interest>section> :nth-child(1) {
    grid-row: 1;
    grid-column: 1/7;
}

#interest>section> :nth-child(2) {
    grid-row: 2;
    grid-column: 5/9;
}

#interest>section> :nth-child(3) {
    grid-row: 3;
    grid-column: 5/12;
    justify-content: right;
}

#interest>section> :nth-child(4) {
    grid-row: 4;
    grid-column: 2/9;
}

.selectionDesign>section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
}

.selectionArt>section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6vw;
}

.selectionArt>section>img {
    width: Calc(78vw/3);
    height: 40vh;
    object-fit: cover;
}

@media (min-width: 321px) and (max-width: 799px) {
    #Titre {
        width: 90vw;
        height: auto;
    
        display: flex;
        flex-direction: column;
        gap:4vh;
        justify-content: left;
        align-items: start;

    }
    
    #Hello {
        width: auto;
        height: auto;
        grid-row: 1/span 4;
        grid-column: 1;

    }
    
    #Hugo {
        width: auto;
        height: auto;
        grid-row: 5 / span 5;
        grid-column: 1;

    }
    
    #Statut {
        width: auto;
        height: auto;
        padding: 1.5vh 0 1.5vh 0;
        grid-row: 10 /span 3;
        grid-column: 1;

    
        display: flex;
        flex-direction: column;
        justify-content: end;
        gap: 1vh;
    }

    #abstract {
        width: 90vw;
        height: 20vh;
        object-fit: cover;
    }

    .selectionDesign>section, .selectionArt>section{
        width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 10vh;
    }

    .selectionArt>section>img {
        width: 90vw;
    }

    /*
    .selectionCard {
        width: 90vw; height: 65vw;
        display: flex;
        flex-direction: column;
        gap: 1vh
    }
    
    .selectionCard> a > img {
        width: 100%; height: ;
        object-fit: cover;
    }
    
    .selectionCard>div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    */

    #interest>section>div>p {
        font-size: 10vw;
        font-weight: 500;
        line-height: 12vw;
        justify-content: left;

    }

    #interest > section {
        width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    #interest>section> :nth-child(3), #interest>section> :nth-child(4) {
        justify-content: right;
    }
    

}