/* Universal box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Gallery container styling */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); /* Adjusted for two images minimum */
  gap: 0.5rem; /* Gap reduced to 0.5rem */
  padding: 1rem; /* Padding set to match gap */
}

/* Gallery item styling */
.gallery-item {
  position: relative; /* Position relative to handle pseudo-elements */
  overflow: hidden;
  box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  background-color: #f0f0f0; /* Placeholder background color */
}

/* Pseudo-element for maintaining aspect ratio */
.gallery-item::before {
  content: "";
  display: block;
  padding-top: 75%; /* Aspect ratio of 4:3 (height / width * 100%) */
}

/* Gallery image styling */
.gallery-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out;
}

/* Hover effect for images */
.gallery-image:hover {
  transform: scale(1.10);
}

/* Responsive styling for smaller screens */
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); /* Ensuring at least two images side by side on smaller screens */
  }
}