Adicionando middle banners

assets/styles/main.css

@@ -22,7 +22,6 @@ body {
 
 .main-banner {
   width: 100%;
-  display: block;
 }
 
 .top-infocard {
@@ -79,7 +78,6 @@ body {
 
 .top-card-image {
   margin-bottom: 27px;
-
 }
 
 .top-card-description {
@@ -89,6 +87,23 @@ body {
   text-align: center;
 }
 
+.middle-banners {
+  gap: 39px;
+  display: flex;
+  padding: 80px 72px;
+  justify-content: center;
+}
+
+.middle-banner {
+  gap: 39px;
+  display: flex;
+}
+
+.middle-banner img {
+  width: 100%;
+  height: 100%;
+}
+
 @media screen and (max-width: 414px) {
   .main-banner-desktop {
     display: none;

index.html

@@ -36,14 +36,12 @@
             <div class="top-infocard-text">
                 <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
                 <h1 class="top-infocard-title">Dolor sit amet</h1>
-
                 <p class="top-infocard-description">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
                     interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
                     dui.
                 </p>
             </div>
-
             <img class="top-infocard-image" src="./assets/images/top-infocard-image.png"
                 alt="Banner de Infocard do Topo" />
         </section>
@@ -57,7 +55,6 @@
                     interdum.
                 </p>
             </div>
-
             <div class="top-card">
                 <img class="top-card-image" src="/assets/images/top-cards-image-02.png"
                     alt="Imagem do Segundo Card do Topo" />
@@ -66,7 +63,6 @@
                     interdum.
                 </p>
             </div>
-
             <div class="top-card">
                 <img class="top-card-image" src="/assets/images/top-cards-image-03.png"
                     alt="Imagem do Terceiro Card do Topo" />
@@ -75,7 +71,23 @@
                     interdum.
                 </p>
             </div>
+        </section>
 
+        <section class="middle-banners">
+            <div class="middle-banner">
+                <div>
+                    <img class="middle-banner-one" src="./assets/images/middle-banner-01.png"
+                        alt="Banner do Meio Um" />
+                </div>
+                <div>
+                    <img class="middle-banner-two" src="./assets/images/middle-banner-02.png"
+                        alt="Banner do Meio Dois" />
+                </div>
+            </div>
+            <div class="middle-banner">
+                <img class="middle-banner-three" src="./assets/images/middle-banner-03.png"
+                    alt="Banner do Meio Tres" />
+            </div>
         </section>
     </main>
 </body>