Adiciona os cards de imagens do meio

assests/style/main.css

@@ -92,6 +92,33 @@ body {
     text-align: center;
 }
 
+.middle-cards-wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    justify-items: center;
+    gap: 40px;
+    margin: 0 72px;
+  
+}
+
+.middle-cards {
+    background: #E0E0E0;
+    margin-bottom: 130px;
+    
+}
+
+.middle-card {
+    max-width: 566px;
+
+    
+}
+
+.middle-card-image {
+    width: 100%;
+    display: block;
+
+}
+
 @media screen and (max-width: 414px) {
     .main-banner-desktop{
         display: none;

index.html

@@ -58,6 +58,23 @@
                 <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
             </div>
         </section>
+
+        <section class="middle-cards">
+            <div class="middle-cards-wrapper">
+                <div class="middle-card">
+                    <img class="middle-card-image" src="./assests/images/middle-card-image-01.png" alt="">
+                </div>
+                
+                <div class="middle-card">
+                    <img class="middle-card-image" src="./assests/images/middle-card-image-02.png" alt="">
+                </div>
+                
+                <div class="middle-card">
+                    <img class="middle-card-image" src="./assests/images/middle-card-image-03.png" alt="">
+                </div>
+            </div>
+        </section>
+            
     </main>
 
     <footer></footer>