src/assets/css/style.css

@@ -9,6 +9,11 @@
   font-family: 'Inter', sans-serif;
 }
 
+body {
+  background-color: #F0F0F0;
+  overflow-x: hidden;
+}
+
 header {
   width: 100%;
   height: 100px;
@@ -58,6 +63,36 @@ header {
   margin-right: 124px;
 }
 
+/* SECTION 3 */
+
+.section3 {
+  padding: 74px 0;
+  display: grid;
+  /* O max-content preenche 100% do espaço disponível, no caso respeitando o tamanho dos card. */
+  grid-template-columns: repeat(3, max-content);
+  justify-content: center;
+  gap: 20px;
+  background-color: #E5E5E5;
+  flex-wrap: wrap;
+}
+
+.card {
+  text-align: center;
+  background-color: #FFFFFF;
+  padding: 34px 26px;
+  flex-direction: column;
+  box-shadow: 0px 4px 20px 0px #0000003B;
+}
+
+.card img {
+  padding-bottom: 26px;
+}
+
+.card p {
+  line-height: 24px;
+  max-width: 300px;
+}
+
 /* RESPONSIVIDADE -> NOTEBOOK */
 
 @media screen and (min-width: 993px) and (max-width: 1280px) {
@@ -66,6 +101,12 @@ header {
   }
 }
 
+@media screen and (min-width: 769px) and (max-width: 1200px) {
+  .section3 {
+    grid-template-columns: repeat(2, max-content);
+  }
+}
+
 /* RESPONSIVIDADE -> TABLET */
 
 @media screen and (max-width: 992px) {
@@ -88,7 +129,23 @@ header {
   .container-img img {
     width: 100%;
     max-width: 240px;
-    margin: 67px 88px 157px 88px;
+    margin: 67px 0 157px 0;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .section3 {
+    grid-template-columns: 1fr;
+    padding: 37px 0;
+    gap: 16px;
+  }
+
+  .card {
+    margin: 0 32px;
+  }
+
+  .card p {
+    max-width: none;
   }
 }