/* (A) GALLERY CONTAINER */
/* (A1) ON BIG SCREENS */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3 IMAGES PER ROW */
  grid-gap: 25px;
  max-width: 1200px;
  margin: 0 auto; /* HORIZONTAL CENTER */
}
/* (A2) ON SMALL SCREENS */
@media screen and (max-width: 640px) {
  .gallery {
    grid-template-columns: repeat(1, auto); /* 1 IMAGES PER ROW */
  }
}

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



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


/* (C) CAPTION */


.gallery figure { 
margin: 0; 
background-color: #eee;
}

.gallery figcaption { 
padding: 4px;
background: transparent;
color: #000;
position: relative;
top: -23px;
left: 0px;
opacity: 1.0;
}

/* (X) DOES NOT MATTER */
body, html {
  padding: 0;
  margin: 0;
}