/* (A) GALLERY CONTAINER */
/* (A1) ON BIG SCREENS */
.gallery_2 {
  display: grid;
  grid-template-columns: repeat(2, auto);
  /* 2 IMAGES PER ROW */
  grid-gap: 10px;
  max-width: 200px;
  /*    margin: 0 auto;  HORIZONTAL CENTER */
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, auto);
  /* 3 IMAGES PER ROW */
  grid-gap: 10px;
  max-width: 1200px;
  /*    margin: 0 auto;  HORIZONTAL CENTER */
}

/* (A2) ON SMALL SCREENS */
@media screen and (max-width: 640px) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, auto);
    /* 2 IMAGES PER ROW */
  }
}

figure {
  border: 2px #cccccc solid;
  margin: auto;
}

figcaption {
  color: black;
  font-style: italic;
  text-align: center;
}

/* (B) THUMBNAILS */
.gallery img {
  width: 100%;
  height: 200px;
  cursor: pointer;
  /* FILL, CONTAIN, COVER, SCALE-DOWN : USE WHICHEVER YOU LIKE */
  object-fit: cover;
}

.gallery img:fullscreen {
  object-fit: contain;
}

/* (X) DOES NOT MATTER */
body,
html {

  padding: 0;
  margin: 0;
}

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}