/* ======================================
Responsive Image gallery Style rules, based on https://blog.logrocket.com/responsive-image-gallery-css-flexbox/
======================================*/

/* Responsive image gallery rules begin*/

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  list-style: none;
	margin-left:auto;
	margin-right:auto;
	padding:0;
	padding-bottom:2.0ex;
	padding-top:1.5ex;
	align-items: center; 
}

.image-gallery > li {
  /* flex: 1 1 auto;  or */ flex:auto;
  max-height: 300px;
  width: 300px;
  margin: auto;
	padding:auto;
/*  max-width: max-content; */
  cursor: pointer;
  position: relative;
}

.image-gallery > li a:hover {
	color:#000000;
	text-shadow: none;
}

.image-gallery::after {
  content: "";
  flex-grow: 999;
}

.image-gallery li img {
  object-fit: cover;
  /* max-width: 100%;
  max-height: 100%; */
  /*padding:auto; */
  margin:auto;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  transform: scale(0);
  transition: all 0.2s 0.1s ease-in-out;
  color: black;
	padding:10px;
  /* center overlay content */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover */
.image-gallery li:hover .overlay {
  transform: scale(1);
}