Cria cards desktop

assets/styles/main.css

@@ -22,18 +22,21 @@ body{
 
 .main-image{
     width: 100%;
+    display: block;
 }
 
 .firts-section{
 display: flex;
 align-items: center;
 justify-content: center;
+text-align: center;
 
 
 }
 
 .son-section-text{
     max-width: 776px;
+    
 
 
 }
@@ -65,12 +68,42 @@ justify-content: center;
 .son-image{
     padding-bottom: 178px;
 }
-    
+
 .second-section{
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(3, max-content);
+    justify-content: center;
+   
+   
     
+}
+
+.cousin-section{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 26px 26px 37px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+
+.cousin-image{
+    display: block;
+    margin-bottom: 20px;
+ 
+}
+
+.cousin-text{
+    max-width: 300px;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
 
 }
 
+
 @media screen and (max-width:  414px){
     .main-image-desktop{
         display: none;
@@ -78,6 +111,20 @@ justify-content: center;
     }
 }
 
+@media screen and(max-width:768px){
+    
+    .firts-section{
+        margin-right: 0;
+
+    }
+    
+    .son-section-text{
+        margin-bottom: 65px;
+
+    }
+
+
+}
 
 
 

index.html

@@ -9,7 +9,7 @@
 
     <title>Desafio Landing Page</title>
 
- >
+
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="assets/styles/main.css">
@@ -39,29 +39,35 @@
             </section>
               
             <section class="second-section">
-                <div>
-                    <img src="assets/image/image-fs1.png" alt="Primeir imagem ">
-                    <p>
+                <div class="cousin-section">
+                    <img class="cousin-image" src="assets/image/image-ss1.png" alt="Primeir imagem ">
+
+                    <p class="cousin-text">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </p>
+
                 </div>
 
-                <div>
-                    <img src="assets/image/image-fs2.png" alt="Segunda imagem">
-                    <p>
+                <div class="cousin-section">
+                    <img class="cousin-image" src="assets/image/image-ss2.png" alt="Segunda imagem">
+
+                    <p class="cousin-text">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </p>
+
                 </div>
 
 
-                <div>
-                    <img src="assets/image/image-fs3.png" alt="Terceira imagem">
-                    <p>
+                <div class="cousin-section">
+                    <img class="cousin-image" src="assets/image/image-ss3.png" alt="Terceira imagem">
+
+                    <p class="cousin-text">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </p>
+
                 </div>
             </section>
-
+        </main>
               
     </body>