mobile hero

index.html

@@ -24,7 +24,6 @@
 </nav>
 <main>
     <section class="hero">
-        <div>
         <div>
             <h1>Słodkości tworzone z <span>pasją</span></h1>
             <p>Naturalne składniki, domowe receptury i pasja. Tworzymy torty i wypieki na Twoje najważniejsze chwile
@@ -34,7 +33,6 @@
         <div>
             <img alt="tort" src="images/001.jpg"/>
         </div>
-        </div>
     </section>
     <section class="about-us">
         <div>

style.css

@@ -30,20 +30,16 @@ nav > div {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr 1fr;
         gap: 1rem;
+        & > .btn {
+            grid-column: 2;
+            grid-row: 1;
+        }
     }
 
     & :last-child {
         justify-self: end
     }
 
-
-    & > .btn {
-        @media (max-width: 768px) {
-            grid-column: 2;
-            grid-row: 1;
-        }
-    }
-
     & > div {
         display: flex;
         align-items: center;
@@ -87,26 +83,34 @@ nav > div {
     max-width: var(--max-content-width);
     height: 800px;
 
-    & > div {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2rem;
 
+    @media (max-width: 768px) {
+        gap: 0;
+        grid-template-columns: 1fr;
+        padding-bottom: 4rem;
+        & > :last-child {
+            grid-row: 1;
+        }
+
+        & > :first-child {
+            grid-row: 2;
+        }
+    }
+
     & > div {
         display: flex;
         justify-content: center;
     }
 
-        /* left portion */
-
     & > :first-child {
         align-items: flex-start;
         flex-direction: column;
         gap: 1rem;
     }
 
-        /* right portion */
-
     & > :last-child {
         align-items: center;
 
@@ -124,7 +128,6 @@ nav > div {
         }
     }
 }
-}
 
 .about-us {
     background-color: var(--surface-container-low);