.app-lite-carousel {
  --app-lite-carousel-gap: 1rem;
  --app-lite-carousel-items: 1;
  container-type: inline-size;
  display: grid;
  gap: 1rem;
}

.app-lite-carousel-track {
  display: flex;
  gap: var(--app-lite-carousel-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 0.25rem;
}

.app-lite-carousel-track::-webkit-scrollbar { display: none; }

.app-lite-carousel-track > * {
  flex: 0 0 calc(
    (100% - ((var(--app-lite-carousel-items) - 1) * var(--app-lite-carousel-gap)))
    / var(--app-lite-carousel-items)
  );
  min-width: 0;
  scroll-snap-align: start;
}

@container (min-width: 36rem) {
  .app-lite-carousel-track { --app-lite-carousel-items: 2; }
}

@container (min-width: 54rem) {
  .app-lite-carousel-track { --app-lite-carousel-items: 3; }
}

/* Opt-in mouse dragging: grab cursor, and snapping is suspended while the pointer holds the track. */
[data-app-lite-carousel-drag] .app-lite-carousel-track { cursor: grab; }
[data-app-lite-carousel-drag] .app-lite-carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
[data-app-lite-carousel-drag] .app-lite-carousel-track img { -webkit-user-drag: none; }