Adiciona banner meio desktop e mobile

assets/style/main.css

@@ -20,8 +20,9 @@ body{
     display: block;
 }
 
-.main-banner {
+.main-banner, .middle-banner {
     width: 100%;
+    display: block;
 }
 
 .top-infocard {
@@ -67,6 +68,7 @@ body{
     display: flex;
     flex-direction: column;
     align-items: center;
+    background: #FFF;
     padding: 26px 26px 34px;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
    /* max-width: 350px; */
@@ -84,7 +86,7 @@ body{
 }
 
 @media screen and (max-width: 414px) {
-    .main-banner-desktop {
+    .main-banner-desktop, .middle-banner-desktop {
         display: none;
     }
 }
@@ -135,7 +137,7 @@ body{
 }
 
 @media screen and (min-width: 415px) {
-    .main-banner-mobile {
+    .main-banner-mobile, .middle-banner-mobile {
         display: none;
     }
 }

index.html

@@ -55,6 +55,11 @@
                     <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
                 </div>
             </section>
+
+            <section>
+                <img class="middle-banner middle-banner-desktop" src="./assets/images/middle-banner-desktop.png" alt="Banner do meio Desktop">
+                <img class="middle-banner middle-banner-mobile" src="./assets/images/middle-banner-mobile.png" alt="Banner do meioMobile">
+            </section>
         </main>
     </body>
 </html>