/* Basic Styling */
body {
  font-family: sans-serif;
  margin: 20px;
  background-color: #f4f4f4;
}
 
h1 {
  text-align: center;
  color: #333;
}
 
.gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centers the gallery */
}
 
.gallery-item {
  width: 300px;
  margin: 10px;
  border: 1px solid #ddd;
  overflow: hidden; /* Prevents content from overflowing */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}
 
.gallery-item:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}
 
 
.gallery-item img {
  width: 100%;
  height: 200px; /* Fixed height for images */
  object-fit: cover;  /* Ensures images cover the area without distortion */
  display: block; /* Remove any default space below the images */
}
 
.caption-container {
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #eee;
}
 
 
.caption {
    font-style: italic;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Prevents caption from wrapping */
}
 
 
/* Responsive Design (adjust for different screen sizes) */
@media (max-width: 600px) {
  .gallery-item {
    width: 90%; /* Full width on smaller screens */
  }
}