.gallery {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  max-width: 1200px;
  margin: 10px auto;
  padding: 0 10px;
}

.gallery__item {
  align-items: center;
  display: flex;
  justify-content: center;
}

.gallery__item > img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gallery__item--hor {
  grid-column: span 2;
}

.gallery__item--vert {
  grid-row: span 2;
}

.gallery__item--lg {
  grid-column: span 2;
  grid-row: span 2;
}

.image-container {
  position: relative; /* Position relative for the description */
  overflow: hidden; /* Hide overflow to prevent the image from showing outside the container */
  height: 100%; /* Ensure the container takes the full height of the grid item */
  width: 100%; /* Ensure the container takes the full width of the grid item */
  transition: background 0.3s ease; /* Smooth transition for background */
  border-radius: 5px;
}

.zoom-image {
  transition: transform 0.3s ease; /* Smooth transition for zoom effect */
  height: 100%; /* Ensure the image takes the full height of the container */
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  width: 100%; /* Ensure the image takes the full width of the container */
}

.image-container:hover .zoom-image {
  transform: scale(1.1); /* Zoom in the image on hover */
}

.image-container:hover {
  background: linear-gradient(rgba(0, 100, 0, 0.7), rgba(0, 100, 0, 0.7)); /* Dark green gradient on hover */
}

.description {
  position: absolute; /* Position the description absolutely */
  bottom: 0; /* Position it at the bottom of the container */
  left: 0; /* Align to the left */
  width: 100%; /* Full width of the container */
  font-weight: 600;
  font-size: medium;
  background-color: rgba(214, 255, 164, 0.8); /* Semi-transparent background */
  color: #2d4011;
  padding: 5px 10px; /* Padding for the description */
  border-radius: 0 0 5px 5px; /* Rounded corners only at the bottom */
  opacity: 0; /* Initially hidden */
  transform: translateY(20px); /* Start below the view */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition for opacity and position */
}

.image-container:hover .description {
  opacity: 1; /* Show the description on hover */
  transform: translateY(0); /* Move to original position */
}