Nicer demo layout

index.html

@@ -26,7 +26,10 @@
         }
 
         body {
-            margin: 2rem;
+            padding: 2rem;
+            max-width: 960px;
+            margin: auto;
+            margin-bottom: 1000px;
         }
 
         h1 {
@@ -48,13 +51,13 @@
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                width: 75%;
                 aspect-ratio: 3/2;
-                max-height: 400px;
+                height: 350px;
+                max-width: 75%;
                 border-radius: 1rem;
                 border: 1px solid #ced4da;
 
-                background-color: #f1f3f5;
+                background-color: #ffd8a8;
                 color: #343a40;
                 transition: box-shadow 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 
@@ -65,8 +68,13 @@
                 }
             }
 
+            &[data-scroll-direction="y"] .slide {
+                max-width: initial;
+                height: 150px;
+            }
+
             .slide:nth-child(even) {
-                background-color: #e9ecef;
+                background-color: #e5dbff;
 
                 @media (prefers-color-scheme: dark) {
                     background-color: #343a40;