Adiciona o card do meio desktop e mobile

index.html

@@ -95,6 +95,31 @@
           </figcaption>
         </figure>
       </div>
+
+      <div class="middle-cards">
+        <figure class="middle-card middle-cards-mobile">
+          <img
+            class="middle-card-image"
+            src="./assets/image/cardMiddleImage1.png"
+            alt=""
+          />
+        </figure>
+        <figure class="middle-card middle-cards-mobile">
+          <img
+            class="middle-card-image"
+            src="./assets/image/cardMiddleImage2.png"
+            alt=""
+          />
+        </figure>
+
+        <figure class="middle-card middle-card-mobile">
+          <img
+            class="middle-card-image"
+            src="./assets/image/cardMiddleImage3.png"
+            alt=""
+          />
+        </figure>
+      </div>
     </main>
   </body>
 </html>

styles/main.css

@@ -103,6 +103,24 @@ body {
   text-align: center;
 }
 
+.middle-cards {
+  display: flex;
+  gap: 39px;
+  background: #e0e0e0;
+  justify-content: center;
+}
+
+.middle-card {
+  width: 30%;
+  position: relative;
+  top: 68px;
+}
+
+.middle-card-image {
+  display: block;
+  width: 100%;
+}
+
 @media screen and (min-width: 1025px) {
   /* Corpo da pagina */
 
@@ -161,4 +179,23 @@ body {
   .top-card {
     width: 84%;
   }
+
+  .middle-cards {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 14px;
+    padding: 0 23px 0;
+  }
+
+  .middle-card {
+    top: 32px;
+  }
+  .middle-card-mobile {
+    width: 89%;
+    margin-top: 14px;
+  }
+
+  .middle-cards-mobile {
+    width: 43%;
+  }
 }