@media screen and (max-width: 700px) {
    
}

@media screen and (max-width: 550px) {
    
}

@media screen and (max-width: 500px) {
    #menu{
        width: 100%;
    }
    #menu ul li{
        font-size: 8vw;
    }
    #menu #menu-bg{
        background-color: rgba(255, 255, 255, 0.6);
    }
    header h1 a{
        font-size: 5.25vw;
        gap: 10px;
    }
    header .separation::before{
        width: 32%;
    }
    header .separation::after{
        width: 32%;
    }
    header .separation img{
        width: 33%;
    }
    main h2{
        font-size: 5vw;
    }
    main h2 span{
        width: 2vw;
    }
    .swiper{
        display: block !important;
    }
    .slider{
        display: none !important;
    }
    footer{
        flex-direction: column;
        height: fit-content;
    }
    footer .conditions{
        width: 100%;
    }
    footer .socialLinks{
        width: 100%;
    }
    main .section-aPropos{
        flex-direction: column;
        gap: 100px;
    }
    main .section-aPropos .article-aPropos p{
        width: 90%;
        margin: 0 auto;
    }
    main .section-galerie{
        grid-template-columns: 100%;
    }
    main .introGalerie{
        padding: 20px;
        text-align: center;
    }
    .main-expositions p{
        padding: 20px;
    }
    .main-expositions .section-expositions{
        flex-direction: column;    
    }
    .main-expositions .section-expositions img{
        width: 80%;  
    }
}