more style tweaks

css/swieta.css

@@ -4,6 +4,11 @@
 }
 
 #swieta {
+    & h2 {
+        text-align: center;
+    }
+
+    box-sizing: border-box;
     & > * {
         padding: 2rem;
     }
@@ -31,16 +36,47 @@
             align-items: center;
             background-color: var(--swieta-green);
             border-radius: var(--border-radius);
+            & > * {
+                text-align: center;
+            }
 
         }
     }
 
+    & > section:has(#wyroby) {
+        & h2 {
+            margin-bottom: 2rem;
+        }
+    }
+
     & #wyroby {
         & > h2 {
             grid-column: -1 / 1;
             place-self: center;
         }
 
+        @media (max-width: 768px) {
+            gap:0;
+
+            background-color: white;
+            border-radius: var(--border-radius);
+            grid-template-columns: 1fr;
+
+            & .card {
+                background-color: transparent;
+                border-radius: 0;
+
+                & > :last-child {
+                    padding: 1rem 2rem;
+                }
+
+                &:not(:last-child) {
+                    border-bottom: 1px solid var(--on-surface);
+                }
+            }
+        }
+
+
         & .card {
             & > :first-child {
                 display:none;
@@ -51,9 +87,13 @@
                 align-items: center;
                 & > h3 {
                     grid-row: -1 / 1;
+                    margin: 11px 0;
+                }
+                &:has(p:not(:empty)) > span {
+                    grid-row: 2;
                 }
                 & > span {
-                    grid-row: 2;
+                    grid-row: -1 / 1;
                     grid-column: 2;
                 }
                 & > p{

html/swieta.templ

@@ -26,13 +26,16 @@ templ Swieta(products []types.Product) {
 				</p>
 			</div>
 		</header>
-		<div id="wyroby" class="swieta">
+		<section>
 			<h2>Święteczne Słodkości</h2>
-			for _, product:= range products {
+			<div id="wyroby" class="swieta">
-				@card(product)
+				for _, product:= range products {
-			}
+					@card(product)
-		</div>
+				}
+			</div>
+		</section>
 		<section id="additional-info">
+			<h2>Informacje odnośnie zamówień świątecznych</h2>
 			<div class="card">
 				<span>ODBIÓR ZAMÓWIEŃ</span>
 				<h3>24 grudnia (wigilia)</h3>