.slider-section {
  width: 100%;
  max-width: var(--layout-width);
  margin: 0 auto 2rem;
  padding: 0;
}

.slider-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  padding-left: 0.25rem;
  scrollbar-width: none;
  /* Firefox */
  cursor: grab;
}

.slider-track.active {
  cursor: grabbing;
  scroll-snap-type: none;
  /* Disable snap while dragging for smoothness */
}

.slider-track::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.slider-card {
  flex: 0 0 auto;
  width: 197px;
  min-height: var(--card-height);
  scroll-snap-align: start;
}

@media (max-width: 768px) {
  .slider-track {
    display: flex;
    /* Keep it as a slider */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .slider-card {
    /* (100% / 2) - half gap */
    width: calc(50% - 0.25rem);
    min-width: calc(50% - 0.25rem);
    min-height: auto;
    scroll-snap-align: start;
  }

  /* Hide scrollbar for cleaner look if desired, or keep it */
  .slider-track::-webkit-scrollbar {
    display: none;
  }
}