diff --git a/base.css b/base.css
index ccd8536..8806632 100644
--- a/base.css
+++ b/base.css
@@ -15,6 +15,13 @@
     --on-surface: #363227;
     --outline-variant: #b9b1a3;
     --on-surface-variant: #645f52;
+    --grid-cols: 3;
+}
+
+@media (max-width: 768px) {
+    :root {
+        --grid-cols: 1;
+    }
 }
 
 body {
diff --git a/components.css b/components.css
index d96a69f..8250263 100644
--- a/components.css
+++ b/components.css
@@ -9,6 +9,7 @@
     color: var(--on-background);
 
     transition-duration: 0.2s;
+
     &:hover {
         transform: scale(1.1);
     }
@@ -93,3 +94,34 @@
         width: 2em;
     }
 }
+
+.subnav {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    /* we don't want any gap between this element and the main contents of the site */
+    padding-bottom: 0;
+
+    & + * {
+        padding-top: 0;
+    }
+
+    & > p {
+        margin: 0;
+    }
+
+    & > * {
+        text-align: center;
+        max-width: 40rem;
+    }
+
+    & > nav {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        justify-content: center;
+        padding: 3rem;
+    }
+}
\ No newline at end of file
diff --git a/kawiarnia.css b/kawiarnia.css
index 8f85311..c6f0fde 100644
--- a/kawiarnia.css
+++ b/kawiarnia.css
@@ -74,12 +74,9 @@
         & > div {
             justify-content: center;
             display: grid;
-            grid-template-columns: repeat(3, 1fr);
+            grid-template-columns: repeat(var(--grid-cols), 1fr);
 
 
-            @media (max-width: 786px) {
-                grid-template-columns: 1fr;
-            }
             width: 100%;
             gap: 2rem;
 
@@ -137,16 +134,13 @@
 
 #kawiarnia-details {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(var(--grid-cols), 1fr);
     justify-content: center;
     gap: 2rem;
     width: 100%;
-    @media (max-width: 786px) {
-        grid-template-columns: 1fr;
-    }
 
     & > header {
-        grid-column: span 3;
+        grid-column: 1/  -1;
         display: flex;
         flex-direction: column;
         justify-content: center;
diff --git a/kawiarnia.html b/kawiarnia.html
index dfe5c0a..e42ba81 100644
--- a/kawiarnia.html
+++ b/kawiarnia.html
@@ -35,52 +35,54 @@
             <div></div>
         </div>
     </header>
-    <section id="kawiarnia-details">
-        <header>
-            <h2>Odwiedź nas</h2>
-            <span>Czekamy na ciebie z świeżymi wypiekami i ciepłą kawą. Znajdź nas w samym centrum miasta.</span>
-        </header>
-        <div>
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                 class="lucide lucide-map-pin-icon lucide-map-pin">
-                <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
-                <circle cx="12" cy="10" r="3"/>
-            </svg>
+    <section>
+        <div id="kawiarnia-details">
+            <header>
+                <h2>Odwiedź nas</h2>
+                <span>Czekamy na ciebie z świeżymi wypiekami i ciepłą kawą. Znajdź nas w samym centrum miasta.</span>
+            </header>
+            <div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                     class="lucide lucide-map-pin-icon lucide-map-pin">
+                    <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
+                    <circle cx="12" cy="10" r="3"/>
+                </svg>
 
-            <h3>Adres</h3>
-            <p>ul. Dworcowa 3a<br>
-                83-300 Kartuzy</p>
-        </div>
-        <div>
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                 class="lucide lucide-clock-icon lucide-clock">
-                <circle cx="12" cy="12" r="10"/>
-                <path d="M12 6v6l4 2"/>
-            </svg>
-            <h3>Godziny Otwarcia</h3>
-            <ul>
-                <li>
-                    <span>pn-pt</span><span>9:00-19:00</span>
-                </li>
-                <li>
-                    <span>sb-nd</span><span>10:00-20:00</span>
-                </li>
-            </ul>
+                <h3>Adres</h3>
+                <p>ul. Dworcowa 3a<br>
+                    83-300 Kartuzy</p>
+            </div>
+            <div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                     class="lucide lucide-clock-icon lucide-clock">
+                    <circle cx="12" cy="12" r="10"/>
+                    <path d="M12 6v6l4 2"/>
+                </svg>
+                <h3>Godziny Otwarcia</h3>
+                <ul>
+                    <li>
+                        <span>pn-pt</span><span>9:00-19:00</span>
+                    </li>
+                    <li>
+                        <span>sb-nd</span><span>10:00-20:00</span>
+                    </li>
+                </ul>
+
+            </div>
+            <div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                     class="lucide lucide-phone-icon lucide-phone">
+                    <path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/>
+                </svg>
+                <h3>Zadzwoń do nas</h3>
+                <p>Masz pytania? Chcesz zarezerwować stolik?</p>
+                <a href="tel:+48690214515">690 214 515</a>
+            </div>
 
         </div>
-        <div>
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                 class="lucide lucide-phone-icon lucide-phone">
-                <path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/>
-            </svg>
-            <h3>Zadzwoń do nas</h3>
-            <p>Masz pytania? Chcesz zarezerwować stolik?</p>
-            <a href="tel:+48690214515">690 214 515</a>
-        </div>
-
     </section>
     <section id="kawiarnia-content">
         <div>
diff --git a/wyroby.css b/wyroby.css
index 9982c3c..d246159 100644
--- a/wyroby.css
+++ b/wyroby.css
@@ -2,66 +2,37 @@
 @import "wyroby_torty.css";
 
 #wyroby {
-    padding-top: 2rem;
+    display: grid;
+    justify-content: center;
+    grid-template-columns: repeat(var(--grid-cols), 1fr);
+    width: 100%;
+    gap: 2rem;
 
-    & > header {
-        justify-content: center;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-
-        & > p {
-            margin: 0;
-        }
-
-        & > * {
-            text-align: center;
-            max-width: 40rem;
-        }
-
-        & > nav {
-             display: flex;
-             align-items: center;
-             gap: 1rem;
-             justify-content: center;
-             padding: 3rem;
-        }
+    & > .card {
+        width: 100%;
     }
 
-
-
-    & > section {
-        padding-top: 1rem;
+    & > .card > div:last-child {
         display: grid;
-        justify-content: center;
-        grid-template-columns: repeat(auto-fill, 18rem);
-        width: 100%;
-        gap: 2rem;
+        grid-template-columns: auto auto;
+        grid-template-rows: auto auto;
 
-        & > .card {
-            & > div:last-child {
-                display: grid;
-                grid-template-columns: auto auto;
-                grid-template-rows: auto auto;
-                & > h3 {
-                    font-size: 1.25rem;
-                }
+        & > h3 {
+            font-size: 1.25rem;
+        }
 
-                & > span {
-                    color: var(--primary);
-                    font-size: 1.25rem;
-                    font-weight: bold;
-                    justify-self: end;
-                }
+        & > span {
+            color: var(--primary);
+            font-size: 1.25rem;
+            font-weight: bold;
+            justify-self: end;
+        }
 
-                & > p {
-                    grid-row: 2;
-                    grid-column: 1/span 2;
-                    text-color: var(--on-surface);
-                    font-size: 0.875em;
-                }
-
-            }
+        & > p {
+            grid-row: 2;
+            grid-column: 1/span 2;
+            text-color: var(--on-surface);
+            font-size: 0.875em;
         }
     }
 }
\ No newline at end of file
diff --git a/wyroby.html b/wyroby.html
index 0d06643..46f5856 100644
--- a/wyroby.html
+++ b/wyroby.html
@@ -22,8 +22,8 @@
         <a class="btn">Kontakt</a>
     </div>
 </nav>
-<main id="wyroby">
-    <header>
+<main>
+    <header class="subnav">
         <h1>Nasze słodkości</h1>
         <p>Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody
             to
@@ -35,7 +35,9 @@
             <a class="btn-green" href="wyroby_lody.html">Lody</a>
         </nav>
     </header>
-    <section>
+    <section >
+        <div id="wyroby">
+
         <div class="card">
             <div>
                 <img alt="Malinowa chmurka" src="images/wyroby/001.jpg"/>
@@ -179,6 +181,7 @@
                 <p></p>
             </div>
         </div>
+        </div>
     </section>
 </main>
 <footer>
diff --git a/wyroby_torty.html b/wyroby_torty.html
index 1fb552f..7345719 100644
--- a/wyroby_torty.html
+++ b/wyroby_torty.html
@@ -22,7 +22,7 @@
         <a class="btn">Kontakt</a>
     </div>
 </nav>
-<main id="wyroby">
+<main>
     <header>
         <h1>Nasze słodkości</h1>
         <p>Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody
@@ -35,7 +35,7 @@
             <a class="btn-green" href="wyroby_lody.html">Lody</a>
         </nav>
     </header>
-    <section>
+    <section id="wyroby">
         <div>
             <h3>Torty z masą cukrową</h3>
             <span>od 200 PLN</span>
@@ -117,11 +117,17 @@
     </section>
     <section>
         <h2>Torty Musowe</h2>
-        <div><h4>Karmel-jogurt-migdały</h4><p>mus z karmelizowanej białej czekolady, chrupiąca warstwa migdałowa, ganache jogurtowy</p></div>
-        <div><h4>Mango-marakuja-truskawka</h4><p>spód migdałowy, galaretka mango-marakuja, żelka truskawkowa, krem diplomat kokosowo-waniliowy</p></div>
-        <div><h4>Czekolada-malina-jeżyna</h4><p>biszkopt jogurtowy, chrupiąca warstwa czekoladowa, żelka jeżynowa, krem malinowy, mus czekoladowy</p></div>
-        <div><h4>Whisky-mango</h4><p>brownie, krem mango, ganache czekoladowe , mus whisky</p></div>
-        <div><h4>Kawa-orzech ziemny</h4><p>biszkopt, karmelizowane orzeszki ziemne, namelaka z masłem orzechowym, kawowy mus</p></div>
+        <div><h4>Karmel-jogurt-migdały</h4>
+            <p>mus z karmelizowanej białej czekolady, chrupiąca warstwa migdałowa, ganache jogurtowy</p></div>
+        <div><h4>Mango-marakuja-truskawka</h4>
+            <p>spód migdałowy, galaretka mango-marakuja, żelka truskawkowa, krem diplomat kokosowo-waniliowy</p></div>
+        <div><h4>Czekolada-malina-jeżyna</h4>
+            <p>biszkopt jogurtowy, chrupiąca warstwa czekoladowa, żelka jeżynowa, krem malinowy, mus czekoladowy</p>
+        </div>
+        <div><h4>Whisky-mango</h4>
+            <p>brownie, krem mango, ganache czekoladowe , mus whisky</p></div>
+        <div><h4>Kawa-orzech ziemny</h4>
+            <p>biszkopt, karmelizowane orzeszki ziemne, namelaka z masłem orzechowym, kawowy mus</p></div>
     </section>
 </main>
 <footer>