From df7a92ff15c119553f2fbf81fcd5e13a49acd58f Mon Sep 17 00:00:00 2001
From: Gabriel Bernardini <biielbernardini@gmail.com>
Date: Thu, 13 Oct 2022 18:43:15 -0300
Subject: [PATCH] feat: adiciona responsividade ao middle banner

---
 assets/style/main.css | 54 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/assets/style/main.css b/assets/style/main.css
index 72d1e4b..bcfd086 100644
--- a/assets/style/main.css
+++ b/assets/style/main.css
@@ -94,6 +94,28 @@ body {
     padding: 26px;
 }
 
+.banner-middle {
+    background:  #E0E0E0;
+    margin-top: 80px;
+}
+.banner-middle-align {
+    display: flex;
+    gap: 40px
+}
+.banner-middle-images {
+    display: flex;
+    justify-content: center;
+    padding: 0 72px;
+    position: relative;
+    top: 62px;
+    gap: 40px;
+}
+
+.banner-middle-image {
+    max-width: 566px;
+    width: 100%;
+}
+
 @media screen and (min-width: 769px) and (max-width: 1270px) {
 
     .second-infocard {
@@ -125,6 +147,38 @@ body {
     .second-infocard {
         grid-template-columns: 350px;
     }
+
+    .banner-middle-image {
+        display: flex;
+        flex-direction: column;
+        margin: 0 auto;
+        position: relative;
+        top: 32px;
+    } 
+    
+    .banner-middle-images {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: center;
+        row-gap: 24px;
+        
+    }
+
+    .image2, .image1 {
+        max-width: 177px;
+    }
+
+    .image3 {
+        max-width: 368px;
+    }
+
+    .banner-middle-align {
+        display: flex;
+        flex-direction: row-reverse;
+        column-gap: 14px;
+        
+    }
     
 }