index.css

:root {
  --wrap: max(2rem, (100vw - 48rem) / 2);
}

/* reset */

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

/* base */

[data-flexscroll] {
  --show: 3;
  --gap: 1rem;
  --size: calc((100% / var(--show)) - ((var(--gap) * (var(--show) - 1)) / var(--show)));
}

[data-flexscroll-viewport] {
  --flexscroll-loop: true;
  --flexscroll-move: one;

  display: flex;
  position: relative;
  gap: var(--gap);
  overflow: auto;
  scroll-behavior: smooth;
  scroll-snap-type: both mandatory;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  > * {
    flex: 0 0 var(--size);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

/* custom */

[data-flexscroll] {
  margin-block: 2rem;
  text-align: center;
}

[data-flexscroll-frame] {
  margin-bottom: 1rem;
}

[data-flexscroll-viewport] {
  height: 12rem;
  margin-bottom: 1rem;
  padding-inline: var(--wrap);
  scroll-padding-inline: var(--wrap);

  > * {
    display: grid;
    place-items: center;
    background: gray;

    &[inert] {
      opacity: 0.5;
    }
  }
}

[data-flexscroll="column"] [data-flexscroll-viewport] {
  flex-direction: column;
  padding-block: 2rem;
  scroll-padding-block: 2rem;
}

[data-flexscroll-frame] {
  margin-inline: var(--wrap);
}

[data-flexscroll-frame] [data-flexscroll-viewport] {
  margin-inline: calc(var(--wrap) * -1);
  padding-inline: var(--wrap);
  scroll-padding-inline: var(--wrap);
}

[data-flexscroll-goto] {
  background: yellow;

  &[data-flexscroll-goto="inert"] {
    background: none;
  }
}