.container {
  --_space: var(--size-6);
  display: grid;
  grid: auto auto / auto auto;
  grid-template-areas:
    "heading metadata"
    "list list";
  justify-content: space-between;
  inline-size: 100%;

  padding-inline: var(--_space);
}

.heading {
  grid-area: heading;
  font-size: var(--size-7);
  color: var(--text-1);
  
  padding-inline: var(--_space);
}

.metadata {
  grid-area: metadata;
  color: var(--text-2);
}

.list {
  grid-area: list;
  list-style-type: none;

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

  gap: var(--_space);
  padding: calc(8 * var(--_space)) calc(2 * var(--_space)) calc(2.5 * var(--_space));
  scroll-padding: calc(2 * var(--_space));
  margin: calc(-7 * var(--_space)) calc(-1 * var(--_space)) 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 {
    inline-size: 15cqi;
  }

  &::after {
    inline-size: 100cqi;
  }

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

    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);
  }
}
