_assets/css/main.css

@@ -27,7 +27,6 @@ body {
 }
 
 .infocard {
-    border: #00c8ff 1px solid;
     margin: 73px 25%;
     justify-content: center;
 
@@ -58,7 +57,6 @@ body {
 }
 
 .pc-icon {
-    border: #00c8ff 1px solid;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -68,7 +66,6 @@ body {
 }
 
 .pc-icon-image {
-    border: #00c8ff 1px solid;
     width: 315px;    
     }
 
@@ -85,7 +82,7 @@ body {
 }
 
 .card {
-    width: 350px;
+    max-width: 350px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -138,7 +135,7 @@ body {
     .infocard-description {
         padding-top: 19px;
         font-size: 16px;
-        line-height: 24px;
+        line-height: 24px; 
         text-align: center;
     }
 
@@ -147,16 +144,44 @@ body {
     }
 
     .pc-icon-image {
-        border: #00c8ff 1px solid;
         width: 58%;  
     }
+
+    .cards-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 91px;
+        padding-bottom: 80px;        
+    }
+    
+    .card {
+        padding: 35px 26px 28px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    }
+    
+    .card-description {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        margin-top: 27px;      
+    }
     
    
 }
 
-@media screen and (min-width: 415px) and (max-width: 1024px){
+
+
+
+
+
+
+
+@media screen and (min-width: 415px) and (max-width: 1200px){
     .top-banner-image-mobile {
         display: none;
+
     }
 
     .infocard {
@@ -179,15 +204,52 @@ body {
         text-align: center;
     }
     .pc-icon {
-        margin-top: 65px;
-        margin-bottom: 91px;
+        margin-top: 65px 0 91px;
+    }
+
+    .pc-icon-image {
+        width: 58%;  
+    }
+
+    .cards-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 91px;
+        padding-bottom: 80px;        
+    }
+    
+    .card {
+        padding: 35px 26px 28px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    }
+    
+    .card-description {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        margin-top: 27px;      
     }
 }
 
+
+
+
+
+
+
+
+
+
+
 @media screen and (min-width: 1024px) and (max-width: 2500px){
 
     .top-banner-image-mobile {
         display: none;
     }
 
-}
+}
+
+
+

index.html

@@ -31,6 +31,7 @@
                 <img class="top-banner-image-mobile" src="./_assets/images/main-banner-mobile.jpg" alt="Top Banner">
             </figure>
 
+            <!-- Bloco Infocard | Desktop and Mobile -->
             <section class="block-main">
                 <div class="infocard">
                     <h2 class="infocard-subtitle">Lorem ipsum</h2>
@@ -43,6 +44,7 @@
                 </figure>
             </section>
 
+            <!-- Cards | Desktop and Mobile -->
             <div class="cards-wrapper">
                 <figure class="card">
                     <img class="card-image" src="./_assets/images/card-image1.svg" alt="Card Image 1">
@@ -64,7 +66,6 @@
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </figcaption>
                 </figure>
-
             </div>
 
          </main>