Reel

.reel {
  /* ↓ Custom properties for ease of adjustment */
  --reel-height: auto;
  --item-width: 25ch;
  display: flex;
  block-size: var(--reel-height);
  /* ↓ Overflow */
  overflow-x: auto;
  overflow-y: hidden;
  /* ↓ For Firefox */
  scrollbar-color: var(--background) var(--text);
}

.reel::-webkit-scrollbar {
  /*
↓ Instead, you could make the scrollbar height
a variable too. This is left as an exercise
(be mindful of the linear-gradient!)
*/
  block-size: 1rem;
}

.reel::-webkit-scrollbar-track {
  background-color: var(--text);
}

.reel::-webkit-scrollbar-thumb {
  background-color: var(--text);
  /* ↓ Linear gradient ‘insets’ the white thumb within the black bar */
  background-image: linear-gradient(
    var(--text) 0,
    var(--text) 0.25rem,
    var(--background) 0.25rem,
    var(--background) 0.75rem,
    var(--colordark) 0.75rem
  );
}

.reel > * {
  /*
↓ Just a `width` wouldn’t work because
`flex-shrink: 1` (default) still applies
*/
  flex: 0 0 var(--item-width);
}

.reel > img {
  /* ↓ Reset for images */
  block-size: 100%;
  flex-basis: auto;
  width: auto;
}

.reel > * + * {
  margin-inline-start: $space-s;
}

.reel.overflowing:not(.no-bar) {
  /* ↓ Only apply if there is a scrollbar (see the JavaScript) */
  padding-block-end: $space-s;
}

/* ↓ Hide scrollbar with `no-bar` class */
.reel.no-bar {
  scrollbar-width: none;
}

.reel.no-bar::-webkit-scrollbar {
  display: none;
}