#scroll {
   width: 90%; /* Responsive width */
   max-width: 98%; /* Prevent overly large container */
   height: auto; /* Adapt height for different content sizes */
   margin: 20px auto; /* Centered with smaller margin */
   background: #f4f4f4; /* Subtle background */
   border: 1px solid #ccc; /* Softer border */
   overflow-x: scroll; /* Allow horizontal scrolling */
   overflow-y: auto; /* Allow vertical scrolling if needed */
   white-space: nowrap; /* Prevent content wrapping */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
   display: flex; /* Flexbox for alignment */
   align-items: center; /* Center vertically */
   padding: 10px; /* Inner padding for spacing */
   gap: 10px; /* Space between elements */
   border-radius: 8px; /* Rounded corners for modern look */
}

#scroll img {
   flex-shrink: 0; /* Prevent shrinking */
   max-width: 100%; /* Ensure images fit within their container */
   max-height: 200px; /* Default image height */
   object-fit: cover; /* Maintain aspect ratio and crop excess */
   border-radius: 8px; /* Match container rounding */
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Add a light shadow */
   transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth hover effects */
}

#scroll img:hover {
   opacity: 0.9; /* Slight fade effect */
   transform: scale(1.05); /* Small zoom on hover */
}

/* Media queries for smaller devices */
@media (max-width: 768px) {
   #scroll {
      width: 95%; /* Slightly smaller container */
      padding: 5px; /* Reduced padding */
      gap: 5px; /* Closer spacing between images */
   }
   #scroll img {
      max-height: 220px; /* Slightly larger images for tablets */
   }
}

@media (max-width: 480px) {
   #scroll {
      gap: 10px; /* Maintain spacing for better look */
   }
   #scroll img {
      max-height: 90vh; /* Images take up 90% of viewport height */
      max-width: 100%; /* Ensure the images are as wide as the container */
   }
}