feat: cria banners meio

assets/styles/main.css

@@ -68,6 +68,7 @@ body {
     display: flex;
     width: 100%;
     grid-template-columns: repeat(3, max-content);
+    flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
     background: #f0f0f0;
@@ -92,14 +93,40 @@ body {
     font-size: 16px;
 }
 
+.middle-banner {
+    width: 100%;
+    height: 530px;
+    left: 0px;
+    top: 1989px;
+
+
+}
+
+.display-grid {
+    display:grid;
+    width: 100%;
+    background: #E0E0E0;
+}
+
+.middle-banner-desktop {
+    position:relative;
+    text-align: center;
+    width: 32%;
+    bottom: 320px;
+    left: 2%;
+    
+}
+
 @media screen and (max-width:414px) {
     .main-banner-desktop {
         display: none;
-        padding: 84px 30px 158px;
+        
     }
 }
 
 @media screen and (min-width:415px) {
     .main-banner-mobile {
-        display: none;}
+        display: none;
+        padding: 84px 30px 158px;
+    }
 }

index.html

@@ -68,6 +68,17 @@
                                 </p>
                                 </figure>
                             </div>
+                            <div>
+                                <figure>
+                                    <img class="middle-banner" src="/assets/images/png/banner middle background.png" alt="banner-background-middle">
+                                </figure>
+                            </div>
+                </section class="display-grid">
+                    <img class="middle banner middle-banner-desktop" src="/assets/images/png/middle banner 1.png" alt="banner do meio 1">
+                    <img class="middle banner middle-banner-desktop" src="/assets/images/png/middle banner 2.png" alt="banner do meio 2">
+                    <img class="middle banner middle-banner-desktop" src="/assets/images/png/middle banner 3.png" alt="banner do meio 3">
+                <section>
+
                 </section>
             </main>
     </body>