/* Galerie */
.image-grid {
  padding: 1em;
  margin:0;
  list-style: none;
}
.image-grid li {
  padding: 1em;  
}
.image-grid img {
  margin: 0 auto; 
  max-width: 100%;  
}

@media screen and (min-width:30em) {
  .image-grid {
    /*
    - flex-wrap permet d'autoriser le retour à la ligne
    - justify-content pour aligner dans la direction du flex (flex-direction)
      -- si on est en row (défaut), flex-start à gauche, flex-end à droite
      -- si on est en column, flex-start en haut, flex-end en bas
      -- si on est en row-reverse ou column-reverse on inverse l'ordre
      -- space-between : répartir l'espace en trop entre tous les éléments
      -- space-around : comme space between mais avec la moitié d'une gouttière à gauche et l'autre tout à droite
         par exemple 5px BLOC 10px BLOC 10px BLOC 5px
    */
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1rem;
    margin: 0 auto;
  }
  .image-grid li {
    box-sizing: border-box;
    display: inline-block;
    width:50%;
    padding: 1rem;    
  }
}
@media screen and (min-width:40em) {
  
  .image-grid li {
    width:33%;
  }

}

@media screen and (min-width:45em) {
  
  .image-grid li {
    width:25%;
  }

}