feat: banners meio desktop e mobile

assets/styles/main.css

@@ -151,6 +151,25 @@ body
     
 }
 
+.middle-banner
+{
+    display: flex;
+    justify-content: center;
+    background: #E0E0E0;
+}
+
+.middle-banner-top, .middle-banner-bottom
+{
+    display: flex;
+    margin: 60px 0 -60px;
+}
+
+.middle-banner-img
+{
+    max-width: 530px;
+    margin: 0 20px;
+
+}
 
 
 
@@ -159,6 +178,22 @@ body
 
 
 
+
+
+
+
+@media screen and (max-width: 300px) 
+{
+    .top-infocard-title
+    {
+        line-height: 30px !important;
+        font-size: 24px !important;
+    }
+}
+
+
+
+
 @media screen and (max-width: 414px) 
 {
     .main-banner-desktop,
@@ -186,7 +221,8 @@ body
 
     .top-infocard-text
     {
-        width: 357px;
+        max-width: 357px;
+        width: 100%;
         padding: 72px 28px 65px;
     }
 
@@ -256,4 +292,143 @@ body
     {
         max-width: 280px;
     }
+}
+
+@media screen and (max-width: 1700px)
+{
+    .middle-banner-img
+{
+    max-width: 450px;
+    margin: 0 20px;
+}
+}
+
+@media screen and (max-width: 1600px) 
+{
+.middle-banner-top, .middle-banner-bottom
+{
+    display: flex;
+    margin: 60px 0 -60px;
+}
+
+.middle-banner-img
+{
+    max-width: 430px;
+    margin: 0 20px;
+
+}
+
+}
+
+@media screen and (max-width: 1400px) 
+{
+
+.middle-banner-img
+{
+    max-width: 330px;
+    margin: 0 20px;
+
+}
+
+}
+
+@media screen and (max-width: 1200px) 
+{
+.middle-banner-img
+{
+    max-width: 280px;
+    margin: 0 15px;
+
+}
+
+}
+
+@media screen and (max-width: 920px) 
+{
+
+.middle-banner-img
+{
+    max-width: 200px;
+    margin: 0 15px;
+
+}
+
+}
+
+@media screen and (max-width: 680px) 
+{
+    .middle-banner
+{
+    padding: 32px 0;
+    flex-direction: column;
+}
+
+.middle-banner-top, .middle-banner-bottom
+{
+    display: flex;
+    margin: 0;
+    justify-content: center;
+}
+
+.middle-banner-img
+{
+    max-width: 240px;
+    margin: 0 14px;
+
+}
+
+.middle-banner-bottom .middle-banner-img
+{
+    max-width: 510px;
+    margin: 20px 0;
+}
+
+}
+
+@media screen and (max-width: 540px) {
+    .middle-banner-img
+{
+    max-width: 218px;
+    margin: 0 7px;
+
+}
+
+.middle-banner-bottom .middle-banner-img
+{
+    max-width: 450px;
+    margin: 20px 0;
+}
+
+}
+
+@media screen and (max-width: 480px) {
+    .middle-banner-img
+{
+    max-width: 170px;
+    margin: 0 7px;
+
+}
+
+.middle-banner-bottom .middle-banner-img
+{
+    max-width: 350px;
+    margin: 20px 0;
+}
+
+}
+
+@media screen and (max-width: 375px) {
+    .middle-banner-img
+{
+    max-width: 120px;
+    margin: 0 7px;
+
+}
+
+.middle-banner-bottom .middle-banner-img
+{
+    max-width: 260px;
+    margin: 20px 0;
+}
+
 }

index.html

@@ -73,6 +73,19 @@
                 </div>
             </section>
 
+            <section class="middle-banner">
+                
+                <div class="middle-banner-top">   
+                    <img class="middle-banner-img" src="./assets/imagens/middle-banner-01.png" alt="Banner do Meio" />
+                    <img class="middle-banner-img" src="./assets/imagens/middle-banner-02.png" alt="Banner do Meio" />
+                </div>
+                
+                <div class="middle-banner-bottom">
+                    <img class="middle-banner-img" src="./assets/imagens/middle-banner-03.png" alt="Banner do Meio" />
+                </div>
+
+            </section>
+
         </main>
     </body>