h1 {

    color: var(--main-color);
    font-style: italic;
    font-size: 6em;
    margin: 0;
    align-self: center;

}


#gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    gap: 100px;

    
}

.container-img::before{
    content: "";
    background-image: url("../img/autres/cadre.png");
    position:absolute;
    inset: 0;
   background-size: 100% 86%;
  background-position:center top;
  background-repeat: no-repeat
}

.container-img{
    margin: 0%;
    display: inline-block;
    width: fit-content;
    width: 100%;
    transition: all 0.2s ease-out;
    position: relative;
    

}

#scroll{
    display: none;
}


@media (max-width: 800px) {

    #scroll{
        display: block;
        color: var(--second-color);
        font-size:1.3rem;
        margin-left: 20px;

    }

    #gallery {
        flex-wrap: nowrap; 
        overflow-x: auto;  
        scroll-snap-type: x mandatory; 
        gap: 30px;         
        padding: 40px 20px; 
        width: 100%;
        justify-content: flex-start; 
    }

    #gallery a {
        flex: 0 0 80%;     
        scroll-snap-align: center; 
        width: auto;       
    }

    figure {
        width: 100%;
    }


figure:hover{
    transform: scale(0.2);
}

}


figcaption{
    font-size: 2rem;
    color: var(--main-color);
}

img{
    box-shadow: #000000 16px 30px 30px;
    width: 97%;
}

figure:hover{
    transform: scale(0.9);
}


a:first-child, a:last-child{
    width: 30%;
}

a:nth-child(2) {

    width: 20%;
}

a:nth-child(3) {

    width: 25%;
}




a:nth-child(4) {

    width: 25%;
    margin-bottom: 90px;
}