From 6821d9238f57ef60a16bd73e70a586baeb5e1f7b Mon Sep 17 00:00:00 2001
From: Guilherme <gui.wcr@gmail.com>
Date: Wed, 12 Oct 2022 23:44:53 -0300
Subject: [PATCH] Adiciona os cards de imagens do meio

---
 assests/style/main.css | 27 +++++++++++++++++++++++++++
 index.html             | 17 +++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/assests/style/main.css b/assests/style/main.css
index 7dc1ab5..f5f8de4 100644
--- a/assests/style/main.css
+++ b/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;
diff --git a/index.html b/index.html
index 7f4f78c..77e465b 100644
--- a/index.html
+++ b/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>