.gallery {
  padding: 0px 75px;
   line-height:0;
   -webkit-column-count:3; /* split it into 5 columns */
   -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:5;
   -moz-column-gap:3px;
   column-count:3;
   column-gap:5px;
}

.gallery img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
}

/* Image 1 */

/* (A) LIGHTBOX BACKGROUND */
#lightbox {
  /* (A1) COVERS FULLSCREEN */
  position: fixed; z-index: 999;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;

  /* (A2) BACKGROUND */
  background: rgba(0, 0, 0, 0.5);

  /* (A3) CENTER IMAGE ON SCREEN */
  display: flex;
  align-items: center;
  align-items: center;

  /* (A4) HIDDEN BY DEFAULT */
  visibility: hidden;
  opacity: 0;

  /* (A5) SHOW/HIDE ANIMATION */
  transition: opacity ease 1s;
}

/* (A6) TOGGLE VISIBILITY */
#lightbox.show {
  visibility: visible;
  opacity: 1;
}

/* (B) LIGHTBOX IMAGE */
#lightbox img {
  /* (B1) DIMENSIONS */
  width: 100%;
  height: auto;

  /* (B2) IMAGE FIT */
  /* contain | cover | fill | scale-down */
  /* object-fit: cover; */
}

/* (C) LIGHTBOX IMAGE - FULLSCREEN ALTERNATIVE */
#lightbox img {
    width: 100vw;
  /* width: 100vw; */
  height: auto;
  /* height: 100vh; */
  /* object-fit: cover; */
}


/* Desktop */
@media only screen and (max-width: 800px) {
  .gallery {
      padding: 0px 10px;
      -moz-column-count:    2;
      -webkit-column-count: 2;
      column-count:         2;
     }


}

@media (max-width: 400px) {
   .gallery {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
   }
}