Dynamische Layoutänderung anhand der Bildschirmgröße

styles/input.css

@@ -11,9 +11,17 @@ h2 {
 }
 
 .card {
-    @apply bg-stone-200 mx-auto p-12 rounded-xl text-stone-800 w-96
+    @apply bg-stone-200 mx-auto p-12 rounded-xl text-stone-800 w-72 sm:w-96
+}
+
+.left-neg-32 {
+    left: -32px;
+}
+
+.right-neg-32 {
+    right: -32px;
 }
 
 .section {
-    @apply container gap-16 grid grid-cols-2 max-w-screen-xl mx-auto py-16
+    @apply container gap-16 grid grid-cols-1 lg:grid-cols-2 max-w-screen-xl mx-auto px-8 py-16
 }