/* (A) GALLERY WRAPPER */

/* (A1) BIG SCREENS - 3 IMAGES PER ROW */

.gallery {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 10px;

  max-width: 1200px;

  margin: 0 auto; /* horizontal center */

}



/* (A2) SMALL SCREENS - 2 IMAGES PER ROW */

@media screen and (max-width: 640px) {

  .gallery { grid-template-columns: repeat(2, 1fr); }

}



/* (B) THUMBNAILS */

.gallery img {

  width: 100%;

  height: 200px;

  object-fit: cover; /* fill | contain | cover | scale-down */

  border: 1px solid #cdcdcd;

  cursor: pointer;

}



/* (C) FULLSCREEN IMAGE */

.gallery img.full {

  position: fixed;

  top: 0; left: 0; z-index: 999999;

  width: 100vw; height: 100vh;

  object-fit: scale-down; /* fill | contain | cover | scale-down */

  border: 0;

  background: #fff;

}



/* (D) OPTIONAL ANIMATION *

.gallery { overflow-x: hidden; }

.gallery img { transition: all 0.3s; } */