@charset "utf-8";
/* CSS Document */

.image-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Center the images */
	gap: 10px; /* Add spacing between images */
	padding: 0 20px 30px 20px; /* Add 30px bottom padding */
	margin: 0 auto; /* Center the gallery container */
}


.image-gallery > li {
  position: relative;
  cursor: pointer;
  list-style-type: none;
  flex: 1 1 calc(33.33% - 10px); /* 3 images per row with a 10px gap */
  max-width: calc(33.33% - 10px); /* Ensure consistent sizing */
}



.image-gallery li img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: 5px;
}


.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(57, 57, 57, 0.502);
  top: 0;
  left: 0;
  transform: scale(0); /* Start with no scale */
  transition: transform 0.2s 0.1s ease-in-out; /* Smooth scaling */
  color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Prevent content from spilling out */
}

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


.image-gallery::after {
  content: "";
  flex-basis: 350px;
}



/* Medium screens: 2 images across */
@media (max-width: 1024px) {
  .image-gallery > li {
    flex: 1 1 calc(50% - 10px); /* 2 images per row */
    max-width: calc(50% - 10px);
  }
}

/* Small screens: 1 image across */
@media (max-width: 768px) {
  .image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Ensures the gallery is centered */
    margin: 0 auto; /* Centers the gallery container */
  }

  .image-gallery > li {
    flex: 1 1 100%; /* 1 image per row */
    max-width: 100%; /* Ensure the image spans the full width */
    text-align: center; /* Optional: Center-align the content */
  }
}

/* Ensure the parent container is centered */
.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
}