.container {
  display: grid;
  grid-auto-flow: row;
  inline-size: 100%;
}

.heading {
  font-size: 2em;
}

.list {
  list-style-type: none;

  container-type: inline-size;
  display: grid;
  grid-auto-flow: column;

  gap: 2em;
  padding: 12em 4em 5em;
  scroll-padding: 4em;
  margin: -10em -4em 0em;

  overflow: visible auto;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  /* the before and afters have unsnappable elements that create bouncy edges to the scroll */
  &::before,
  &::after {
    content: "";
    display: block;
  }

  &::before {
    order: 0;
    inline-size: 15cqi;
  }

  &::after {
    order: 11;
    inline-size: 50cqi;
  }

  & > li {
    scroll-snap-align: start;
    container-type: scroll-state;
    padding: 0;
    position: relative;

    z-index: calc(var(--sibling-count) - var(--sibling-index));

    &:has(> :hover, > :focus-within) {
      z-index: calc(var(--sibling-count) + 1);
    }

    & > * {
      @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
          animation: slide-in linear both;
          animation-timeline: view(inline);
          animation-range: cover -100cqi contain 15cqi;
        }
      }
    }
  }
}

@keyframes slide-in {
  from {
    transform: translateX(-100cqi) scale(0.5);
  }
}