From 30980246e80f6b0ce99cb7e8f79684ef71599f2e Mon Sep 17 00:00:00 2001
From: Daniel Stock <daniel.stock@tooloop.de>
Date: Fri, 2 Oct 2026 21:46:43 +0200
Subject: [PATCH] Optimization pass

---
 index.html | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index c3bd5ae..b9d8538 100644
--- a/index.html
+++ b/index.html
@@ -35,22 +35,28 @@
         .snappy-carousel {
             .scroll-container {
                 max-height: 300px;
+                gap: 0.5rem;
             }
 
             .slide {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                width: 33%;
+                width: 75%;
                 aspect-ratio: 3/2;
+                min-height: 200px;
                 max-height: 400px;
+                border-radius: 1rem;
+                border: 1px solid #ced4da;
 
                 background-color: #f1f3f5;
                 color: #343a40;
+                transition: box-shadow 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 
                 @media (prefers-color-scheme: dark) {
                     background-color: #495057;
                     color: #f8f9fa;
+                    border-color: #868e96;
                 }
             }
 
@@ -63,6 +69,10 @@
                 }
             }
 
+            .slide.is-active {
+                box-shadow: inset 0 0 0 4px #339af0;
+            }
+
             .prev,
             .next {
                 width: 1.5rem;
@@ -89,7 +99,8 @@
             }
 
             .pagination {
-                display: flex;
+                display: inline-flex;
+                margin-top: 1rem;
             }
 
             .pagination .dot {
@@ -127,15 +138,11 @@
         Options
         -------
 
-        https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap
+        See https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap
 
         data-direction="x" 
         data-direction="y" 
         
-        data-gap="var(--size-1)"
-        data-gap="10px"
-        data-gap="1rem"
-        
         data-snap-stop="always"
         data-snap-stop="normal"
         
@@ -143,7 +150,7 @@
         data-snap-align="start"
         data-snap-align="end"
     -->
-    <div class="snappy-carousel" data-gap="1rem" data-snap-align="start">
+    <div class="snappy-carousel">
         <div class="scroll-container">
             <div class="slide">1</div>
             <div class="slide">2</div>