From 2680d8fd8347ae22073528ca3e6d063ccd977cd0 Mon Sep 17 00:00:00 2001
From: Gabriel Ferraz <gabrielferraznog@gmail.com>
Date: Mon, 10 Oct 2022 22:25:24 -0300
Subject: [PATCH] =?UTF-8?q?<fix>[middle-banner]:ajustei=20a=20faixa=20atra?=
 =?UTF-8?q?s=20das=20imagens=20e=20desloquei=20as=20fotos=20de=20posi?=
 =?UTF-8?q?=C3=A7=C3=A3o,=20mobile=20e=20desktop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/styles/main.css | 17 ++++++++++-------
 index.html             | 27 +++++++++++++--------------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/assets/styles/main.css b/assets/styles/main.css
index 5a791f3..849c5c5 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -61,7 +61,7 @@ body{
     grid-template-columns: repeat(3, 1fr);
     gap: 21px;
     justify-content: center;
-    padding: 178px 20% 80px;
+    padding: 178px 20% 50px;
 }
 .top-card{
     display: flex;
@@ -74,7 +74,7 @@ body{
 .top-card-image{
     display: block;
     min-width: 5vw;
-    margin-bottom: 30px;
+    margin-bottom: 80px;
 }
 .top-card-description{
     font-weight: 400;
@@ -82,21 +82,24 @@ body{
     line-height: 24px;
     text-align: center;
 }
+.middle-banner-wrapper{
+    background: #E0E0E0
+}
 .banners-middle{
     display: flex;
     justify-content: center;
     gap: 39px;
-    background: #E0E0E0
+    position: relative;
+    bottom: -62px;  
 }
 .middle-banner{
-    display: block;
     width: 29%;
 }
 .middle-banner-image{
+    display: block;
     width: 100%;
 }
 
-
 @media screen and (min-width: 2500px) {
     .page-header{
         padding: 58px
@@ -136,9 +139,9 @@ body{
         "b1 b2" 
         "b3 b3";
         justify-items: center;
-        padding: 32px 23px;
+        padding: 0px 23px 0px;
         gap: 14px;
-        bottom: 60px;
+        top: 32px;
     }  
     .middle-banner{
         width: 100%;
diff --git a/index.html b/index.html
index 65d912f..8e53354 100644
--- a/index.html
+++ b/index.html
@@ -60,24 +60,23 @@
                 </figure>
             </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 class="middle-banner-wrapper">
+                <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>
-            
+                
             </div>
-
         </main>
     </body>
     </html>
\ No newline at end of file