/* Gallery CSS */

.gallery {
  display: flex; /* Makes the children flex items */
  flex-wrap: wrap; /* Allows items to wrap onto the next line */
  /* Use flex-start (or just remove the property) to align items to the left */
  justify-content: center; /* Centers the gallery items horizontally */
  width: 100%;
  margin: 0 auto;
  padding: 10px;
}

/* 2. Styling for each gallery item */
div.gallery-item {
  margin: 5px;
  border: 1px solid #ccc;
  float: left; /* Aligns items horizontally */
  width: 300px; /* Fixed width for each item (adjust as needed) */    
}

/* 3. Hover effect */
div.gallery-item:hover {
  border: 1px solid #777;
}

/* 4. Styling for the image */
div.gallery-item img {
  width: 100%; /* Makes the image fill its container */
  height: auto;  
}

/* 5. Styling for the caption/description */
div.desc {  
  text-align: center;
}