@import url('reset.css');
@import url('variable.css');
@import url('color.css');
@import url('police.css');

#containerGallery{
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 40px auto;
}

.zonePicture{
    width: 25%;
}

.cartPicture{
    margin: 30px;
}

.cartPicture img{
    min-width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

body {
  background: url("/images/about.webp") center center no-repeat;
  background-size: cover;
  height: 270px;
}

h1{
    font-weight: 700;
    font-size: 64px;
    color: var(--color-white);
    text-align: center;
}

@media screen and (max-width:1700px) {
    body {
        height: 350px;
    }
}

@media screen and (max-width:1100px) {
    .zonePicture{
        width: calc(100%/3);
    } 
    body {
        height: 350px;
    }
    h1{
        font-size: 55px;
    }
}

@media screen and (max-width:992px) {
    .zonePicture{
        width: 50%;
    } 
    body {
        height: 350px;
    }
    h1{
        font-size: 45px;
    }
}

@media screen and (max-width:767px) {
    .zonePicture{
        width: 100%;
    } 
    body {
        height: 380px;
    }
    h1{
        font-size: 40px;
    }
}