From b8469c4436651de33395889f4ffecdecf6eabd53 Mon Sep 17 00:00:00 2001
From: Gabriel Ferraz <gabrielferraznog@gmail.com>
Date: Mon, 10 Oct 2022 21:12:03 -0300
Subject: [PATCH] =?UTF-8?q?=20<feat>[adi=C3=A7=C3=A3o=20dos=20main=20banne?=
 =?UTF-8?q?rs]:<=20nas=20vers=C3=A3o=20mobile=20e=20desktop>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/styles/main.css | 39 ++++++++++++++++++++++++++++-----------
 index.html             | 27 ++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/assets/styles/main.css b/assets/styles/main.css
index ed85398..5a791f3 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -82,18 +82,21 @@ body{
     line-height: 24px;
     text-align: center;
 }
-.Banners-middle{
-    display: grid;
-    grid-area: 1fr 1fr 1fr;
+.banners-middle{
+    display: flex;
     justify-content: center;
-    gap: 36px;
+    gap: 39px;
     background: #E0E0E0
 }
 .middle-banner{
     display: block;
+    width: 29%;
+}
+.middle-banner-image{
     width: 100%;
 }
 
+
 @media screen and (min-width: 2500px) {
     .page-header{
         padding: 58px
@@ -101,7 +104,7 @@ body{
 }
 
 
-@media screen and (max-width: 1025px) {
+@media screen and (max-width: 1024px) {
     .main-banner-desktop{
         display: none;
     }
@@ -124,15 +127,29 @@ body{
     .top-cards{
         padding: 90px 7%;
     }
-}
-
-@media screen and (max-width: 992px){
     .top-infocard-image{
         width: 34%;
     }
-    /* top-cards */
-    .top-cards{
-        grid-template-columns: repeat(2, 1fr);
+    .banners-middle{
+        display: grid;
+        grid-template-areas:
+        "b1 b2" 
+        "b3 b3";
+        justify-items: center;
+        padding: 32px 23px;
+        gap: 14px;
+        bottom: 60px;
+    }  
+    .middle-banner{
+        width: 100%;
+    }
+    .Banner1{
+        grid-area: b1;
+    }
+    .Banner2{
+        grid-area: b2;
+    }    .Banner3{
+        grid-area: b3;
     }
 }
 
diff --git a/index.html b/index.html
index d1a9dc0..65d912f 100644
--- a/index.html
+++ b/index.html
@@ -45,7 +45,7 @@
                 <img class="top-infocard-image" src="./assets/imagens/top-infocard-image.png" alt="Imagem-do-infocard-do-topo"/>
             </section>
 
-            <section class="top-cards">
+            <div class="top-cards">
                 <figure class="top-card card-1">
                     <img class="top-card-image" src="./assets/imagens/top-card-image-1.svg" alt="Primeira-card-do-topo"/>
                     <figcaption class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
@@ -58,13 +58,26 @@
                     <img class="top-card-image" src="./assets/imagens/top-card image-3.svg" alt="Terceiro-card-do-topo"/>
                     <figcaption class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
                 </figure>
-            </section>
+            </div>
+
+            <div class="banners-middle">
+                <figure class="middle-banner Banner1">
+                    <img class="middle-banner-image" src="./assets/imagens/middle-banner-1.png" alt="Segunda-imagem-do-meio"/>
+                </figure>
+
+                <figure class="middle-banner Banner2">
+                    <img class="middle-banner-image" src="./assets/imagens/middle-banner-2.png" alt="Segunda-imagem-do-meio"/>
+                </figure>
+
+                <figure class="middle-banner Banner3">
+                    <img class="middle-banner-image " src="./assets/imagens/middle-banner-3.png" alt="Segunda-imagem-do-meio"/>
+                </figure>
+            </div>
+            
+            <div>
+            
+            </div>
 
-            <figure class="Banners-middle">
-                <img class="middle-banner" src="./assets/imagens/middle-banner-1.png" alt="Primeira-imagem-do-meio"/>
-                <img class="middle-banner" src="./assets/imagens/middle-banner-2.png" alt="Segunda-imagem-do-meio"/>
-                <img class="middle-banner" src="./assets/imagens/middle-banner-3.png" alt="Terceira-imagem-do-meio"/>
-            </figure>
         </main>
     </body>
     </html>
\ No newline at end of file