.scroll-container {
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent cards from wrapping to new lines */
  display: flex; /* Enable flexbox layout */
  gap: 20px; /* Adjust spacing between cards */
  padding: 20px;
}

.card {
  flex: 0 0 auto; /* Maintain card width based on content */
  min-width: 300px; /* Minimum width of each card */
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .scroll-container {
    flex-wrap: nowrap; /* Ensure cards don't wrap in small screens */
    overflow-x: scroll; /* Enable scrolling on small screens */
  }
}