diff --git a/css/swieta.css b/css/swieta.css
index 947a259..fc43cc5 100644
--- a/css/swieta.css
+++ b/css/swieta.css
@@ -3,6 +3,16 @@
     --swieta-gold: oklch(75% .12 80);
     --swieta-red: oklch(45% .15 25);
     --border-color: color-mix(in oklab, var(--swieta-green) 25%, transparent);
+
+    --swieta-pad: 2rem;       /* outer: section padding, gaps between cards */
+    --swieta-card-pad: 2rem;  /* inner: padding inside cards and boxes */
+}
+
+@media (max-width: 768px) {
+    :root {
+        --swieta-pad: 1rem;
+        --swieta-card-pad: 1.25rem;
+    }
 }
 
 #swieta {
@@ -12,7 +22,7 @@
 
     box-sizing: border-box;
     & > * {
-        padding: 2rem;
+        padding: var(--swieta-pad);
     }
     & .card:hover{
         transform:none;
@@ -21,9 +31,12 @@
         & p, & h1 {
             color: white;
         }
-        padding: 4rem 2rem ;
+        padding: 4rem var(--swieta-pad);
         @media (max-width: 1024px) {
-            padding: 2rem 2rem ;
+            padding: 2rem var(--swieta-pad);
+        }
+        @media (max-width: 768px) {
+            padding: 1rem var(--swieta-pad);
         }
         max-width: var(--max-content-width);
         margin: 0 auto;
@@ -32,7 +45,7 @@
             color: var(--swieta-gold);
         }
         & > div {
-            padding: 2rem;
+            padding: var(--swieta-card-pad);
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -48,6 +61,9 @@
     & > section:has(#wyroby) {
         & h2 {
             margin-bottom: 2rem;
+            @media (max-width: 768px) {
+                margin-bottom: 1rem;
+            }
         }
     }
 
@@ -69,7 +85,7 @@
                 border-radius: 0;
 
                 & > :last-child {
-                    padding: 1rem 2rem;
+                    padding: .75rem var(--swieta-card-pad);
                 }
 
                 &:not(:last-child) {
@@ -111,13 +127,13 @@
     & #additional-info {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        gap: 2rem;
+        gap: var(--swieta-pad);
         @media (max-width: 768px) {
             grid-template-columns: 1fr ;
         }
         & > div {
             box-sizing: border-box;
-            padding: 2rem;
+            padding: var(--swieta-card-pad);
             display: flex;
             flex-direction:column;
             align-items: center;
@@ -147,7 +163,7 @@
     margin: 0 auto;
 
     & > div {
-        padding: 2rem;
+        padding: var(--swieta-card-pad);
         border-radius: var(--border-radius);
         background-color: var(--secondary-container);
         & > p, & > h2{
@@ -157,9 +173,12 @@
             min-width: 0;
             display: grid;
             gap: 1rem;
-            grid-template-columns: minmax(0, 1fr )minmax(0, 1fr);
+            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+            @media (max-width: 768px) {
+                gap: .75rem;
+            }
             @media (max-width: 720px) {
-                grid-template-columns:  minmax(0, 1fr)
+                grid-template-columns: minmax(0, 1fr);
             }
             & > fieldset {
                 grid-column: -1 / 1;
@@ -191,6 +210,9 @@
                         display: grid;
                         place-items: center;
                         margin: 0.5rem;
+                        @media (max-width: 768px) {
+                            margin: .25rem;
+                        }
                         width: 2rem;
                         height: 2rem;
                         padding: 0.5rem;
@@ -209,6 +231,9 @@
             }
             & > * {
                 padding: 1rem;
+                @media (max-width: 768px) {
+                    padding: .75rem;
+                }
                 border-radius: var(--small-radius);
                 border: 1px solid var(--border-color);
             }