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

.gallery2 {
   -webkit-column-count:4; /* split it into 5 columns */
   -webkit-column-gap:10px; /* give it a 5px gap between columns */
   -moz-column-count:4;
   -moz-column-gap:10px;
   column-count:4;
   column-gap:10px;
}

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

.gallery2 img {
   margin-bottom: 10px;
}

 .overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   z-index: 9999;
}

.overlay img {
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -40%);
   width: auto;
   height: auto;
   max-width: 80%;
   max-height: 80%;
   -webkit-filter: drop-shadow(2px 2px 0 rgba(19, 154, 147, 0.534))
                drop-shadow(-2px 2px 0 rgba(19, 154, 147, 0.534))
                drop-shadow(2px -2px 0 rgba(19, 154, 147, 0.534))
                drop-shadow(-2px -2px 0 rgba(19, 154, 147, 0.534));

    filter: drop-shadow(2px 2px 0 rgba(19, 154, 147, 0.534))
        drop-shadow(-2px 2px 0 rgba(19, 154, 147, 0.534))
        drop-shadow(2px -2px 0 rgba(19, 154, 147, 0.534))
        drop-shadow(-2px -2px 0 rgba(19, 154, 147, 0.534));
}

#close-button {
   position: absolute;
   cursor: pointer;
   font-size: 50px;
   color: rgba(19, 154, 147, 0.534);
   z-index: 1;
 }

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

   .gallery2 {
      -moz-column-count:    4;
      -webkit-column-count: 4;
      column-count:         4;
   }
}
@media (max-width: 1000px) {
   .gallery {
    -moz-column-count:    4;
    -webkit-column-count: 4;
    column-count:         4;
   }
}
@media (max-width: 800px) {
   .gallery {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
   }
}
@media (max-width: 600px) {
    .gallery {
     -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;
   }
}