/* Gallery Wrapper */
.gallery-wrapper {
  display: flex;
  width: 100%;
  height: 92vh; /* Maintain overall height */
  overflow: hidden; /* Hide overflow for smooth sliding */
}

/* Spacer Div */
.spacer {
  width: 20%; /* Occupies 20% of the width */
  height: 100%; /* Matches the height of the gallery */
  background-color: transparent;
}

/* Gallery Container */
.gallery-container {
  width: 80%; /* Occupies 80% of the width */
  height: 100%; /* Matches overall height */
  overflow: hidden; /* Prevent overflow */
  display: flex;
}

.gallery-track {
  display: flex;
  gap: 25px; /* Space between all images */
  height: 100%; /* Match container height */
  scroll-behavior: smooth; /* Enable smooth scrolling */
}

/* Horizontal Images */
.gallery-image.horizontal {
  flex-shrink: 0;
  width: 90%; /* Full width for horizontal images */
  height: 100%; /* Full height for horizontal images */
  object-fit: cover; /* Maintain aspect ratio */
}

/* Vertical Images */
.gallery-image.vertical {
  flex-shrink: 0;
  width: 32%; /* Three images side by side */
  height: 100%; /* Full height for vertical images */
  object-fit: cover; /* Maintain aspect ratio */
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .gallery-wrapper {
    flex-direction: column; /* Stack spacer and gallery vertically */
  }

  .spacer {
    width: 100%; /* Full width for spacer on mobile */
    height: 10%; /* Adjust height for visual balance */
  }

  .gallery-container {
    width: 100%; /* Full width for gallery */
    height: 82%; /* Adjust height for mobile layout */
  }

  .gallery-image.vertical {
    width: 100%; /* Full width for vertical images on mobile */
    height: auto; /* Maintain aspect ratio */
  }
}