/*
    Auteur: Danilo Anzile
    Date : 11.03.2022
    Version 2
    Description: CSS Gallery
*/

.body {
    padding-top: 2.5%;
}

h1.titreGallery {
    font-size: xxx-large;
    text-align: center;
}

h2.sousTitreGallery {
    text-align: center;
    font-style: italic;
}

div#gallery {
    display: flex;
    margin-left: 5%;
    flex-wrap: wrap;
    margin-bottom: 2.5%;
    margin-right: 5%;
}

img.montre {
    width: 25%;
    height: 400px;
    padding: 10px;
    max-height: 75%;
    object-fit: cover;
}

img.montre:hover {
    padding: 0px;
    transition: 0.3s;
}


/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
    h1.titreGallery {
        font-size: x-large;
    }
    img.montre {
        width: 100%;
    }
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width:601px) and (max-width: 992px) {
    h1.titreGallery {
        font-size: xx-large;
    }
    img.montre {
        width: 50%;
    }
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width:993px) and (max-width:1200px) {
    img.montre {
        width: 33%;
    }
}