.carousel {
  display: block grid;
  grid: auto 1fr / 100%;

  & > header {
    anchor-name: --carousel;
    padding-inline: 3rem;
    font-size: 1.75rem;
    font-weight: 900;
  }

  & > ul {
    list-style-type: none;

    container-type: size;
    inline-size: 100%;
    block-size: min(60svh, 720px);

    display: grid;
    grid-auto-flow: column;

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

    justify-self: center;

    gap: 1em;
    padding-inline: 2em;
    scroll-padding-inline: 2em;
    padding-block: 2em 4em;
    margin-block-end: 5em;

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

    &::scroll-button(*) {
      z-index: 20;
      background: oklch(from var(--surface-1) l c h / 50%);
      backdrop-filter: blur(10px);
    }

    &::scroll-button(inline-start) {
      position-area: center span-inline-start;
      content: "◄" / "Previous";
    }

    &::scroll-button(inline-end) {
      position-area: center span-inline-end;
      content: "►" / "Next";
    }

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

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

      & > figure {
        @supports (animation-timeline: view()) {
          @media (prefers-reduced-motion: no-preference) {
            animation: slide-in linear both;
            animation-timeline: view(inline);
            animation-range: cover -100cqi contain 25cqi;
          }
        }
        @container scroll-state(snapped: inline) {
          outline: 1px solid var(--gray-1);
          outline-offset: 10px;
        }

        flex-shrink: 0;
        block-size: 100cqb;
        aspect-ratio: 9/16;
        background: light-dark(#ccc, #444);
        box-shadow: var(--shadow-5);
        border-radius: 20px;
        overflow: clip;

        display: flex;

        @container (width < 480px) {
          block-size: 50cqb;
        }

        & > img {
          inline-size: 100%;
          block-size: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

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