From b112b25e8433bb09b60eabb400b684085c85c258 Mon Sep 17 00:00:00 2001
From: bronkuu <bronk.jakub@proton.me>
Date: Tue, 28 Apr 2026 11:39:47 +0200
Subject: [PATCH] finally fixed the images

---
 index.html |  8 ++++++--
 style.css  | 49 +++++++++++++++++++++++++++----------------------
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index f9d1d7b..777b808 100644
--- a/index.html
+++ b/index.html
@@ -37,8 +37,12 @@
     <section class="about-us">
         <div>
             <div>
-                <img alt="kawiarnia" src="images/002.jpg"/>
-                <img alt="kawiarnia" src="images/003.jpg"/>
+                <div>
+                    <img alt="kawiarnia" src="images/002.jpg"/>
+                </div>
+                <div>
+                    <img alt="kawiarnia" src="images/003.jpg"/>
+                </div>
             </div>
             <div>
                 <span>Tradycja i serce</span>
diff --git a/style.css b/style.css
index f7f8251..b19fc34 100644
--- a/style.css
+++ b/style.css
@@ -84,12 +84,12 @@ nav > div {
 
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr;
     gap: 2rem;
     padding: 2rem;
 
     @media (max-width: 768px) {
         grid-template-columns: 1fr;
+
         & > :last-child {
             grid-row: 1;
         }
@@ -135,38 +135,43 @@ nav > div {
         max-width: var(--max-content-width);
         margin: 0 auto;
         padding: 2rem;
-        gap: 2rem;
+        gap: 4rem;
         display: grid;
-        grid-template-columns: 6fr 4fr;
+        grid-template-columns: 3fr 2fr;
         align-items: center;
 
         @media (max-width: 768px) {
             grid-template-columns: 1fr;
-
         }
 
-        & :first-child {
-            width: 100%;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 1rem;
+        & > :first-child {
+            position: relative;
 
-            & img {
-                width: 100%;
+            & > div {
+                overflow: hidden;
                 border-radius: var(--border-radius);
-                position: relative;
+                border: 10px solid var(--surface-container-low);
 
-                border: 8px solid var(--surface-container-low);
+                &:first-child {
+                    position: relative;
+                    z-index: 10;
+                    width: 80%;
+                }
+
+                &:last-child {
+                    position: absolute;
+                    bottom: -3rem;
+                    right: 0;
+                    z-index: 20;
+                    width: 50%;
+                }
+
+                & > img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
             }
-
-            & div:first-child > img {
-                top: -1rem;
-            }
-
-            & div:last-child > img {
-                top: 1rem;
-            }
-
         }
 
         & :last-child {