.gallery-container {
  display: flex;       /* This moves them next to each other */
  flex-wrap: wrap;     /* This allows them to wrap to the next line */
  justify-content: center; /* Centers the images on the page */
  gap: 15px;           /* Adds space between the images */
  padding: 20px;
}

/* Controls how many images per row */
.responsive {
  flex: 1 1 200px;     /* Allows images to grow, but keeps them at a 200px base */
  max-width: 300px;    /* Prevents images from getting too huge */
}

/* Styles the box around the image */
.gallery {
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;    /* Clips image to the border radius */
}

/* Ensures the image fills the container correctly */
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Creates a perfect square before the image loads */
  height: 200px;       
  object-fit: cover;   
  display: block;
  background-color: #eee; /* Shows a light gray box while waiting */
}