applied the cool new carousel css feature!

src/routes/(shell)/index.module.css

@@ -1,39 +1,121 @@
-.list {
+.carousel {
+  display: block grid;
+  grid: auto 1fr / 100%;
+
+  & > header {
     anchor-name: --carousel;
-    overflow: auto;
-    scroll-snap-type: inline mandatory;
+    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;
 
-    inline-size: 80%;
+    overflow: visible auto;
+    scroll-snap-type: inline mandatory;
+    overscroll-behavior-inline: contain;
+
     justify-self: center;
 
-    & > li {
-        inline-size: 30vw;
-        list-style: none;
-        scroll-snap-align: start;
+    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;
     }
 
-    &::scroll-button(inline-start),
-    &::scroll-button(inline-end) {
-        position: fixed;
-        position-anchor: --carousel;
+    /* 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) {
-        --_inner: center span-inline-end;
-        --_outer: inline-start center;
-
-        position-area: var(--_outer);
-        content: 'arrow_back' / 'Previous';
+      position-area: center span-inline-start;
+      content: "◄" / "Previous";
     }
 
     &::scroll-button(inline-end) {
-        --_inner: center span-inline-start;
-        --_outer: inline-end center;
-
-        position-area: var(--_outer);
-        content: 'arrow_forward' / 'Next';
+      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);
+  }
+}