From 19b426adb33f340744eb50185f5a05d172783d82 Mon Sep 17 00:00:00 2001
From: bronkuu <bronk.jakub@proton.me>
Date: Tue, 28 Apr 2026 12:03:33 +0200
Subject: [PATCH] nasze wyroby

---
 index.html | 102 ++++++++++++++++++--------------------
 style.css  | 142 ++++++++++++++++++++++++++++-------------------------
 2 files changed, 124 insertions(+), 120 deletions(-)

diff --git a/index.html b/index.html
index 777b808..57b9e04 100644
--- a/index.html
+++ b/index.html
@@ -60,63 +60,59 @@
         </div>
     </section>
     <section class="featured-delights">
+        <h2>Nasze Wyroby</h2>
         <div>
-            <h2>Nasze Wyroby</h2>
-
             <div>
-                <div>
-                    <div>
-                        <img alt="tort" src="images/004.jpg"/>
-                    </div>
-                    <div>
-                        <h3>Torty Okazjonalne</h3>
-                        <p>Weselne, urodzinowe i te bez okazji – od klasyki po nowoczesne musy.</p>
-                        <a>Przeglądaj Torty
-                            <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-arrow-right-icon lucide-arrow-right">
-                                <path d="M5 12h14"/>
-                                <path d="m12 5 7 7-7 7"/>
-                            </svg>
-                        </a>
-                    </div>
-                </div>
-                <div>
-                    <div>
-                        <img alt="ciasto" src="images/005.jpg"/>
-                    </div>
-                    <div>
-                        <h3>Domowe Ciasta</h3>
-                        <p>Zapach tradycji: od serników po puszyste bezy</p>
-                        <a>Wyberz ciasto
-                            <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-arrow-right-icon lucide-arrow-right">
-                                <path d="M5 12h14"/>
-                                <path d="m12 5 7 7-7 7"/>
-                            </svg>
-                        </a>
-                    </div>
-                </div>
-                <div>
-                    <div>
-                        <img alt="slodkosci" src="images/006.jpg"/>
-                    </div>
-                    <div>
-                        <h3>Słodkie Stoły</h3>
-                        <p>Kompleksowa oprawa słodkości na większe przyjęcia.</p>
-                        <a>Sprawdź słodkie stoły
-                            <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-arrow-right-icon lucide-arrow-right">
-                                <path d="M5 12h14"/>
-                                <path d="m12 5 7 7-7 7"/>
-                            </svg>
-                        </a>
-                    </div>
-                </div>
+                <img alt="tort" src="images/004.jpg"/>
+            </div>
+            <div>
+                <h3>Torty Okazjonalne</h3>
+                <p>Weselne, urodzinowe i te bez okazji – od klasyki po nowoczesne musy.</p>
+                <a>Przeglądaj Torty
+                    <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-arrow-right-icon lucide-arrow-right">
+                        <path d="M5 12h14"/>
+                        <path d="m12 5 7 7-7 7"/>
+                    </svg>
+                </a>
             </div>
         </div>
+        <div>
+            <div>
+                <img alt="ciasto" src="images/005.jpg"/>
+            </div>
+            <div class="greener">
+                <h3>Domowe Ciasta</h3>
+                <p>Zapach tradycji: od serników po puszyste bezy</p>
+                <a>Wyberz ciasto
+                    <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-arrow-right-icon lucide-arrow-right">
+                        <path d="M5 12h14"/>
+                        <path d="m12 5 7 7-7 7"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+        <div>
+            <div>
+                <img alt="slodkosci" src="images/006.jpg"/>
+            </div>
+            <div>
+                <h3>Słodkie Stoły</h3>
+                <p>Kompleksowa oprawa słodkości na większe przyjęcia.</p>
+                <a>Sprawdź słodkie stoły
+                    <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-arrow-right-icon lucide-arrow-right">
+                        <path d="M5 12h14"/>
+                        <path d="m12 5 7 7-7 7"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+
     </section>
     <section class="kawiarnia">
         <div>
diff --git a/style.css b/style.css
index b19fc34..9beb25b 100644
--- a/style.css
+++ b/style.css
@@ -131,10 +131,10 @@ nav > div {
 .about-us {
     background-color: var(--surface-container-low);
 
+    padding: 2rem;
     & > div {
         max-width: var(--max-content-width);
         margin: 0 auto;
-        padding: 2rem;
         gap: 4rem;
         display: grid;
         grid-template-columns: 3fr 2fr;
@@ -183,84 +183,92 @@ nav > div {
 }
 
 .featured-delights {
+    max-width: var(--max-content-width);
+    margin: 0 auto;
+    padding: 2rem;
+    gap: 2rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto auto;
+
+    & > h2 {
+        align-self: center;
+        justify-self: center;
+        grid-column: 1/ span 3;
+    }
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+
+        & > h2 {
+            grid-column: 1;
+        }
+    }
+
     & > div {
-        max-width: var(--max-content-width);
-        margin: 6rem auto;
+        width: 100%;
         display: flex;
         flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 5rem;
 
-        & > div {
-            display: flex;
-            align-items: center;
-            flex-direction: row;
-            justify-content: center;
-            gap: 3rem;
 
-            & > div {
-                width: 100%;
+        position: relative;
+        border-radius: var(--border-radius);
+        overflow: hidden;
+        background-color: white;
 
-                position: relative;
-                border-radius: var(--border-radius);
-                overflow: hidden;
-                background-color: white;
+        .greener {
+            background-color: rgb(from var(--secondary-container) r g b / 0.3);
+        }
 
-                &:nth-child(2) {
-                    background-color: rgb(from var(--secondary-container) r g b / 0.3);
-                }
+        & img {
+            display: block;
+            width: 100%;
+            scale: 1;
+            transition: scale 0.7s;
+        }
 
-                & img {
-                    display: block;
-                    width: 100%;
-                    scale: 1;
-                    transition: scale 0.7s;
-                }
+        & > div:first-child {
+            overflow: hidden;
+        }
 
-                & > div:first-child {
-                    overflow: hidden;
-                }
+        & > div:last-child {
+            display: grid;
+            grid-template-rows: auto auto 1fr;
+            padding: 2rem;
+            flex-grow: 1;
 
-                & > div:last-child {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: flex-start;
-                    padding: 1.5rem 2rem 3rem 2rem;
-
-                    & > a {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        gap: 1rem;
-                        color: var(--primary);
-                        font-weight: bold;
-                        text-decoration: none;
-                    }
-                }
-
-                top: 0;
-                transition: top 0.2s;
-
-                &:hover {
-                    top: -10px;
-
-                    & img {
-                        scale: 1.1;
-                    }
-
-                    & svg {
-                        margin-left: 10px;
-                    }
-                }
-
-                & svg {
-                    transition-duration: 0.2s;
-                    height: 2em;
-                    width: 2em;
-                }
+            & > a {
+                display: flex;
+                align-self: end;
+                align-items: center;
+                justify-content: flex-start;
+                gap: 1rem;
+                color: var(--primary);
+                font-weight: bold;
+                text-decoration: none;
             }
         }
+
+        top: 0;
+        transition: top 0.2s;
+
+        &:hover {
+            top: -10px;
+
+            & img {
+                scale: 1.1;
+            }
+
+            & svg {
+                margin-left: 10px;
+            }
+        }
+
+        & svg {
+            transition-duration: 0.2s;
+            height: 2em;
+            width: 2em;
+        }
     }
 }