/* css/gallery.css */

.gallery {
    /* Set a fixed height to create a scrollable area */
    max-height: 600px;
    overflow-y: auto;
    padding: 10px;
    
    /* Grid layout for gallery items */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 15px;
}

.gallery-item {
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.05);
}
/* For WebKit Browsers */
.gallery {
  /* existing styles */
  max-height: 600px;
  overflow-y: auto;
  padding: 10px;
  
  /* Custom scrollbar width */
  scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #0ad transparent;          /* For Firefox */
}

.gallery::-webkit-scrollbar {
  width: 8px; /* width of the scrollbar */
}

.gallery::-webkit-scrollbar-track {
  background: transparent; /* color of the track */
  border-radius: 4px;
}

.gallery::-webkit-scrollbar-thumb {
  background-color: #0ad; /* color of the thumb */
  border-radius: 4px;
  border: 2px solid #eee; /* creates some padding around thumb */
}

/* Optional: On hover, change thumb color */
.gallery::-webkit-scrollbar-thumb:hover {
  background-color: #099; /* darker or lighter shade of your theme color */
}