article {
    width: 90vw;
    height: auto;

    display: flex;
    flex-direction: column;
    gap: 20vh;
}

.section{
    animation: none;
}
.footer{
    animation: reveal linear;
    animation-timeline: view();
    animation-range-start: over 50%;
    animation-range-end: contain 0%;
}
.sectionTitle{
    height: auto;
}
.Titre {
    width: 90vw;
    height: auto;

    display: flex;
    flex-direction: row;
    gap: 1vw;
    align-items: end;
    justify-content: space-between;
}

.tags {
    display: flex;
    flex-direction: row;
    gap: 1vw;
}

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

.SousTitre {
    display: flex;
    flex-direction: row;
    gap: 4vw;
    align-items: end;
    animation: textReveal linear;
    animation-timeline: view();
    animation-range-start: over 50%;
    animation-range-end: contain 30%;
}

.SousTitre>div:nth-child(1) {
    width: 30vw;
}

.SousTitre>div:nth-child(2) {
    width: 56vw;
}

article>div>div{
    animation: textReveal linear;
    animation-timeline: view();
    animation-range-start: over 50%;
    animation-range-end: contain 50%;
}
.projectChapter img {
    max-width: 90vw;
}

.projectChapter>content {
    display: flex;
    flex-direction: column;
    gap: 10vh;
}

.projectChapter>div:nth-child(2) {
    width: 56vw;
    padding-left: 34vw;
}

.Couleur {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.Couleur>img {
    object-fit: cover;
    height: 16vw;
}

#logos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#logos>img {
    height: 16vw;
}

.ecran {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ecran > div {
    width: 20vw;
    display: flex;
    flex-direction: column;
    gap: 2vh;
    height: auto;
}

.ecran img {
    object-fit: cover ;
    width: 20vw;
    height: fit-content;
}

.images {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.images>img {
    object-fit: cover;
}

.Double>img {
    max-width: 40vw;
    max-height: 40vw;

}

.Simple>img {
    max-width: 90vw;
    max-height: 70vh;
}

.Triple>img {
    max-width: 24vw;
    max-height: 40vw;
}

.Quadruple>img {
    max-width: 20vw;
}

.Quintuple>img {
    max-width: 16vw;
}

@media (min-width: 321px) and (max-width: 799px) {
    #Thumbnail {
        height: 20vh;
    }

    .Titre {
        width: 90vw;
        height: auto;
    
        display: flex;
        flex-direction: column;
        gap: 1vw;
        align-items: end;
        justify-content: space-between;
    }

    .SousTitre {
        flex-direction: column;
        gap: 4vh;
        align-items: start;
    }
    
    .SousTitre>div:nth-child(1) {
        width: 90vw;
    }
    
    .SousTitre>div:nth-child(2) {
        width: 90vw;
    }

    .images {
        display: flex;
        flex-direction: column;
        gap : 4vh;
    }
    
    .images > img {
        object-fit: fill;
        max-width: 90vw;
        max-height: 70vh;    
    }
    
    .Quintuple>img {
        max-width: 16vw;
    }
    
    .projectChapter>div:nth-child(2) {
        width: 90vw;
        padding-left: 0vw;
    }

    .ecran img {
        object-fit: cover ;
        height: 20vw;
        height: fit-content;
    }
    
}