.carousel-container {
    display: flex; /* or grid with grid-auto-flow: column */
    overflow-x: auto; /* enables horizontal scrolling */
    scroll-snap-type: x mandatory; /* snaps to the x axis, mandatory alignment */
    scroll-behavior: smooth; /* smooth scrolling animation */
    scrollbar-width: none; /* hides the scrollbar for a cleaner look */
    -ms-overflow-style: none; /* IE and Edge */
  }
  
  .carousel-container::-webkit-scrollbar {
    display: none; /* hides scrollbar in Chrome, Safari, Opera */
  }
  
  .carousel-slide {
    flex: 0 0 100%; /* each slide takes the full width of the container */
    scroll-snap-align: start; /* aligns the start of the slide to the start of the container */
  }
  
  .carousel-slide img {
    width: 100%; /* ensures image fills the slide width */
    height: auto; /* maintains aspect ratio */
    object-fit: cover; /* ensures image covers the area without distortion */
  }