@media(max-width: 800px){
    :root{
        --gap: 12px;
    }
    main{
        padding: 24px var(--gap) 0px var(--gap);
        width: calc(100% - var(--gap) - var(--gap) - var(--gap));
    }
    .multiText{
        grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
    }
    .textBouton, p{
        font-size: 12px;
    }
    .navigation{
        margin-top: 2px;
    }
    .noMargin{
        margin: 0;
    }
    header{
        width: calc(100vw - var(--gap) - var(--gap) - var(--gap));
    }
}

@media(max-width: 500px){
    main{
        
        padding: 40px var(--gap) 0px var(--gap);
        grid-template-columns: calc(100%/3)  calc(100%/3) calc(100%/3);
        width: calc(100% - var(--gap) - var(--gap) - var(--gap) - var(--gap));
        
    }
    .mainContent{
        grid-column: 1/3;
    }
    header{
        display: flex;
        flex-direction: column;
        width: calc(100vw - var(--gap) - var(--gap));
    }
    .textBouton, p{
        font-size: 12px;
    }
    .mainProjet{
        display: flex;
        flex-direction: column;
        width: calc(100% - var(--gap) - var(--gap) );
    }
    .projetTexte{
        padding-top: 22px;
        width: calc(100% - var(--gap));
        position: relative;
        width: 100%;
        right: inherit;
        
    
    }
}