From 66581668d2927bd1b2a45f32000d9f61f486246c Mon Sep 17 00:00:00 2001
From: Victor Souza <victorsouza11@gmail.com>
Date: Mon, 10 Oct 2022 16:10:57 -0300
Subject: [PATCH] Adicionar middle-cards

---
 index.html | 23 ++++++++++---------
 main.css   | 66 +++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 69 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 25a9fe9..76bad71 100644
--- a/index.html
+++ b/index.html
@@ -35,20 +35,23 @@
         <img class="main-image-mobile"src="./assests/main-image-mobile.png" alt="Imagem da main Mobile">
       </figure>
       <div class="middle-cards">
-        <figure>
-            <img src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+        <figure class="middle-card">
+            <img class="middle-card-image" src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio">
+            <p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+        </figure>
+
+        <figure class="middle-card">
+          <img class="middle-card-image" src="./assests/middle-card-02.png" alt="Imagem do segundo card do meio">
+          <p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+         </figure>
+
+         <figure class="middle-card">
+          <img class="middle-card-image" src="./assests/middle-card-03.png" alt="Imagem do terceiro card do meio">
+          <p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
         </figure>
      </div>
     </section>
 
-    
-   
-    <div>
-    
-    </div>
-    
-    
   </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/main.css b/main.css
index 817027f..b3afc99 100644
--- a/main.css
+++ b/main.css
@@ -24,7 +24,11 @@ body {
 
 .main-banner {
   width: 100%;
-  display: block;
+  display: block;  
+}
+
+.main-image-desktop {
+  margin-bottom: 180px;
 }
 
 .middle-information {
@@ -60,20 +64,62 @@ body {
   margin-bottom: 28px;
 }
 
-@media screen and (max-width: 414px) {
-  .main-banner-desktop, .main-image-desktop {
-      display: none;
-  }
+.middle-cards {
+  display: flex;
+  justify-content: center;
+  gap: 22px;
+
+
 }
 
-@media screen and (min-width:415px ) {
+.middle-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 18%;
+  background-color:#FFFFFF;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+  padding: 36px 26px 28px;
+  
+}
+
+.middle-card-image {
+  display: block;
+  margin-bottom: 26px;
+}
+
+.middle-card-description {
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@media screen and (min-width: 1025px) {
+  
   .main-banner-mobile, .main-image-mobile {
     display: none;
-  }
 }
 
-  @media screen and (max-width:1024px) {
-  
+}
+
+  /* @media screen and (max-width:1024px) {
+    .main-banner-desktop, .main-image-desktop {
+      display: none;
+    }
+
     .middle-text {
     width: 100%;
     max-width: 112%;
@@ -95,4 +141,4 @@ body {
   }
 
 }
-
+ */