.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  padding: 8px;
}

.gallery img {
  width: 100%;
  height: 100%; /* Ensures the image completely fills the container */
  object-fit: cover; /* Crops the image to fit the container while maintaining its aspect ratio */
  object-position: center; /* Centers the image within the container */
  border-radius: 8px;
}


.portrait {
  grid-column: span 2; /* Portrait photos take up 2 columns */
  grid-row: span 3;    /* Portrait photos take up 3 rows */
}

.landscape {
  grid-column: span 3; /* Landscape photos take up 3 columns */
  grid-row: span 2;    /* Landscape photos take up 2 rows */
}