/* Gallery Container Setup */
.gallery-container {
  display: grid;
  /* Slightly larger base size so the images are easier to see */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; /* Clean, uniform spacing */
  padding: 20px 0; /* Removed the background color and grid pattern */
}

.gallery-container img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  
  /* Matches Tailwind's rounded-lg to fit your overall theme */
  border-radius: 0.5rem; 
  
  /* Very subtle resting shadow */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  
  /* Smooth, quick transition for the hover effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- THE HOVER EFFECT --- */
.gallery-container img:hover {
  /* A very gentle lift instead of a dramatic pop */
  transform: translateY(-4px);
  /* Slightly deeper shadow on hover */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  z-index: 10;
}