.scrollable-horizontal {
  overflow: auto hidden;
  display: flex;
  gap: var(--gap, 1rlh);
  flex-direction: row;
  max-width: 100%;
  scroll-snap-type: x var(--snap-type, proximity);

  > :where(*) {
    flex-grow: 0;
    flex-shrink: 0;
    scroll-snap-align: var(--snap-align);
    scroll-margin: var(--scroll-margin);
  }
}

.scrollable-vertical {
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap, 1rlh);
  scroll-snap-type: y var(--snap-type, proximity);

  > :where(*) {
    flex-grow: 0;
    flex-shrink: 0;
    scroll-snap-align: var(--snap-align);
    scroll-margin: var(--scroll-margin);
  }
}

.scrollable-nosnap {
  --snap-type: none;
}