first two sections in torty

base.css

@@ -8,6 +8,7 @@
     --on-background: #363227;
     --nav-height: 4rem;
     --border-radius: 48px;
+    --small-radius: 24px;
     --small-border-radius: 8px;
     --max-content-width: 80rem;
     --secondary-container: #e0f5cb;

components.css

@@ -124,4 +124,19 @@
         justify-content: center;
         padding: 3rem;
     }
+}
+
+.card-low {
+    background-color: var(--surface-container-low);
+    border: 1px solid var(--surface-container-highest);
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    & > h3 {
+        padding-bottom: 1rem;
+    }
+    & > span {
+        color: var(--primary);
+        font-weight: bold;
+        font-size: 1.25rem;
+    }
 }

missing.txt

@@ -13,3 +13,6 @@ karpatka
 większe logo w headerze
 kontakt powinien gdzieś prowadzić
 inna czcionka w headerze
+optimize image sizes
+reduce reload flicker
+organize file structure

wyroby.css

@@ -1,4 +1,3 @@
-@import "base.css";
 @import "wyroby_torty.css";
 
 #wyroby {

wyroby_torty.css

@@ -0,0 +1,82 @@
+#rodzaje-tortow {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    @media (max-width: 786px) {
+        grid-template-columns: 1fr;
+    }
+    gap: 2rem;
+
+    & > div {
+
+    }
+}
+
+#cennik-tortow {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    @media (max-width: 786px) {
+        grid-template-columns: 1fr;
+    }
+    gap: 2rem;
+
+    & li {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        & > span:last-child {
+            font-weight: bold;
+            color: var(--primary);
+
+        }
+
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--surface-container-highest);
+        }
+    }
+
+    & > div:first-child {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: auto 1fr;
+
+        & > h3, & > svg {
+            padding: 1rem;
+        }
+
+        & > svg {
+            place-self: center;
+            font-size: 2rem;
+            padding-right: 0;
+        }
+
+
+        & > ul {
+            grid-column: 1 / -1;
+            border-radius: var(--small-radius);
+            border: 1px solid var(--surface-container-highest);
+            background-color: white;
+            overflow: hidden;
+
+            & > li {
+                padding: 1rem 2rem;
+
+                &:first-child {
+                    background-color: rgb(from var(--secondary-container) r g b / 30%);
+                    font-weight: bold;
+
+                    & > span:last-child {
+                        color: black;
+                    }
+                }
+
+            }
+        }
+    }
+
+    & > div:last-child > ul > li {
+        padding: 0.75rem 0rem;
+    }
+
+}
+

wyroby_torty.html

@@ -23,7 +23,7 @@
     </div>
 </nav>
 <main>
-    <header>
+    <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,28 +35,31 @@
             <a class="btn-green" href="wyroby_lody.html">Lody</a>
         </nav>
     </header>
-    <section id="wyroby">
-        <div>
+    <section id="rodzaje-tortow">
+        <div class="card-low">
             <h3>Torty z masą cukrową</h3>
             <span>od 200 PLN</span>
-            <p>Artystyczne zdobienia i figurki. Cena zależy od dekoracji i rozmiar</p>
+            <p>Artystyczne zdobienia i figurki. Cena zależy od dekoracji i rozmiaru</p>
         </div>
-        <div>
+        <div class="card-low">
             <h3>Torty nowoczesne</h3>
             <span>od 180 PLN</span>
             <p>Cena zależy od dekoracji i rozmiar</p>
         </div>
-        <div>
+        <div class="card-low">
             <h3>Torty Bezowe</h3>
             <span>od 170 PLN</span>
             <p>Wycena indywidualna przy zamówieniu</p>
         </div>
-        <div>
+        <div class="card-low">
             <h3>Torty Weselne</h3>
             <span>Wycena indywidualna</span>
             <p>Degustacje i projektowanie dopasowane do wesela</p>
         </div>
+    </section>
+    <section id="cennik-tortow">
         <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-banknote-icon lucide-banknote"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></svg>
             <h3>Cennik Tortów Tradycyjnych</h3>
             <ul>
                 <li><span>Ilość porcji</span><span>Cena orientacyjna</span></li>
@@ -67,7 +70,7 @@
                 <li><span>2-25 porcji</span><span>od 300 PLN</span></li>
             </ul>
         </div>
-        <div>
+        <div class="card-low">
             <h3>Dodatki do tortów</h3>
             <ul>
                 <li><span>Figurka z masy cukrowej</span><span>od 50 PLN</span></li>