Merge pull request 'feat(index): adiciona estilo para cards de baixo para desktop e mobile' (#15) from feature/bottom-cards into main

Reviewed-on: #15

styles/main.css

@@ -89,6 +89,7 @@ body {
     display: flex;
     justify-content: center;
 }
+
 .top-cards {
     gap: 21px;
 
@@ -157,6 +158,31 @@ body {
     width: 100%;
 }
 
+/*bottom cards*/
+.bottom-cards {
+    gap: 16px;
+
+    width: 92.50%;
+    margin: 0 auto;
+    padding-bottom: 108px;
+}
+
+.bottom-card {
+    padding: 35px 32px 45px;
+}
+
+.bottom-card-image {
+    width: 29%;
+    padding-bottom: 18px;
+}
+
+.bottom-card-description {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+}
+
 /*mobile*/
 @media screen and (max-width: 1024px) {
 
@@ -202,10 +228,10 @@ body {
     /*top cards*/
     .cards {
         flex-direction: column;
+        width: 100%;
     }
 
     .top-cards {
-        width: 100%;
         padding: 0 30px 80px;
     }
 
@@ -217,7 +243,8 @@ body {
         font-size: 14px;
     }
 
-    .top-card-image {
+    .top-card-image,
+    .bottom-card-image {
         max-width: 150px;
     }
 
@@ -229,17 +256,24 @@ body {
 
     .middle-images-wrapper {
         top: 32px;
-    
+
         grid-template-areas: "image2 image1" "image3 image3";
         column-gap: 14px;
         row-gap: 24px;
-    
+
         width: 100%;
     }
+
+    /*bottom cards*/
+    .bottom-cards {
+        padding: 0 23px 89px;
+    }
+
 }
 
 /*4K*/
 @media screen and (min-width: 2500px) {
+
     /*top infocard*/
     .top-infocard-subtitle {
         font-size: 64px;
@@ -252,9 +286,9 @@ body {
     }
 
     .top-infocard-description,
-    .top-card-description {
+    .top-card-description,
+    .bottom-card-description {
         font-size: 32px;
         line-height: 48px;
     }
-}
-
+}