assets/styles.css/main.css

@@ -70,7 +70,7 @@ body {
 .top-cards {
     background: #FFFFFF;
     grid-template-columns: repeat(3, max-content);
-    padding: 90px 0 0;
+    padding: 90px 0 80px;
     display: grid;
     gap: 20px;
     justify-content: center;
@@ -92,6 +92,19 @@ body {
     text-align: center;
 }
 
+.middle-banner {
+    background-color: #E0E0E0;
+    width: 1920px;
+    max-height: 530px;
+    margin: auto;
+}
+
+.middle-banner-image {  
+    width: 100%;
+    max-width: 566px;
+    margin: 62px 18px 0;
+}
+
 @media screen and (max-width: 414px) {
     .main-banner-desktop {
         display: none;
@@ -128,6 +141,22 @@ body {
         grid-template-columns: 1fr;
         padding: 36px 26px;
     }
+
+    .middle-banner {
+        display: grid;
+        grid-template-columns: repeat(2, max-content);
+    }
+
+    .middle-banner-image {
+        max-width: 177px;
+        height: 178px;
+    }
+
+    .middle-banner-image-ex {
+        max-width: 368px;
+        height: 372px;
+        display: grid;
+    }
 }
 
 @media screen and (min-width: 415px) {
@@ -139,12 +168,6 @@ body {
 @media screen and (min-width: 768px) and (max-width: 1023px) {
     .top-cards {
         grid-template-columns: 1fr;
-        padding: 36px 26px;
-    }
-}
-
-@media screen and (min-width: 415px) and (max-width: 767px) {
-    .main-banner-desktop {
-        display: none;
+        padding: 30px 28px;
     }
 }

index.html

@@ -67,6 +67,15 @@
                   </p>
                </div>
             </section>
+
+            <section class="middle-banner">
+                <div class="middle banners">
+                    <img class="middle-banner-image" src="./assets/images/middle-banner-01.png" alt="Primeiro banner do Meio" />
+                    <img class="middle-banner-image middle-banner" src="./assets/images/middle-banner-02.png" alt="Segundo banner do meio" />
+                    <img class="middle-banner-image middle-banner-image-ex" src="./assets/images/middle-banner-03.png" alt="Terceiro banner do meio" />
+                </div>
+            </section>
+
         </main>
     </body>
 </html>