feat(home):adicao dos cards com imagem versao desktop

assets/style/style.css

@@ -74,7 +74,7 @@ body{
 
 .top-cards{
     display: grid;
-    grid-template-columns: repeat(3,max-content); 
+    grid-template-columns: repeat(3, max-content); 
     gap: 21px;
     justify-content: center;
     margin-bottom: 80px;
@@ -102,6 +102,34 @@ body{
     text-align: center;  
 }
 
+.cards-image{
+    display: grid;
+    grid-template-columns: repeat(3, max-content); 
+    justify-content: center;
+    background: #E0E0E0;
+    gap: 39px;
+}
+
+.card-image{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 26px 26px 34px;
+    background: #FFFFFF;
+    padding: 0px;
+    margin-top: 62px;
+}
+
+.card-img{
+    display: block;
+    margin-bottom: 26px;
+}
+
+
+
+
+
+
 
 /*MEDIAS*/
 

index.html

@@ -66,6 +66,20 @@
                 <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
             </figure>
         </section>
+
+        <section class="cards-image">
+            <figure class="card-image">
+                <img class="card-img" src="./assets/images/card-image1.png" alt="Imagem de um computador fechando visto de frente"/>
+            </figure>
+
+            <figure class="card-image">
+                <img class="card-img" src="./assets/images/card-image2.png" alt="Imagem de um computador ligado visto de frente com a tela fechada na metade"/>
+            </figure>
+
+            <figure class="card-image">
+                <img class="card-img" src="./assets/images/card-image3.png" alt="Imagem de um computador ligado visto de lado"/>
+            </figure>
+        </section>
     </main>