From 37e8cc7ba4b9d19800e9f0dc328dca4e9902ee76 Mon Sep 17 00:00:00 2001
From: Amanda <almeidafonseca14@gmail.com>
Date: Tue, 11 Oct 2022 17:58:27 -0300
Subject: [PATCH] Adiciona o card do meio desktop e mobile

---
 index.html      | 25 +++++++++++++++++++++++++
 styles/main.css | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/index.html b/index.html
index 67ca7a0..2084fe7 100644
--- a/index.html
+++ b/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>
diff --git a/styles/main.css b/styles/main.css
index 9146b1f..46a2ddb 100644
--- a/styles/main.css
+++ b/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%;
+  }
 }