applied the cool new carousel css feature!

src/components/list/list.module.css

@@ -9,6 +9,9 @@
 }
 
 .list {
+  list-style-type: none;
+
+  container-type: inline-size;
   display: grid;
   grid-auto-flow: column;
 
@@ -18,14 +21,53 @@
   margin: -10em -4em 0em;
 
   overflow: visible auto;
-  scroll-snap-type: inline proximity;
+  scroll-snap-type: inline mandatory;
+  overscroll-behavior-inline: contain;
 
-  @media (hover: none) {
-    padding: 5em;
-    margin: 0;
+  @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;
+
+    order: calc(var(--sibling-count) - var(--sibling-index));
+    z-index: var(--sibling-index);
 
     & > * {
-      scroll-snap-align: start;
+      @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);
+  }
+}