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

/* (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; }

.gallery-item {
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  /* box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08); */
  /* padding: 20px; */
  box-shadow: 0px 2px 12px #BBBBBB;
  border-radius: 10px;
  border: 6px solid #eeeeee; 
}


.gallery-item img {
  transition: transform .5s ease;

}


.gallery-item p {
  text-align: justify;
list-style-type: circle;
}

.gallery-item ul {
  list-style-type: circle;
}


/* add this if you want paragraph highlights
.gallery-item p:hover {
  color: #fefefe;
  transition: transform 1s ease;
}
*/

.gallery-item:hover img {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	filter: grayscale(0%);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 1;
}