src/assets/css/style.css

@@ -87,6 +87,7 @@ header a {
 
 .card figure img {
   max-width: 50%;
+  height: 80px;
 }
 
 figcaption {
@@ -114,6 +115,45 @@ figcaption {
   height: 350px;
 }
 
+/* SECTION 4 */
+
+.section4 {
+  max-width: 90%;
+  margin: 0 auto;
+}
+
+.section4 .container-cards {
+  padding-top: 164px;
+}
+
+.section4 .card {
+  text-align: center;
+  max-width: none;
+}
+
+.container-content2 {
+  padding: 50px 0 20px 0;
+}
+
+.text-title2 {
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 39px;
+}
+
+.text-paragraph2 {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  max-width: 44%;
+  margin: 0 auto;
+}
+
+figure .fundo-desktop2 {
+  max-width: 80%;
+  padding: 40px 0 70px 0;
+}
+
 /* TELAS GRANDES */
 
 @media only screen and (min-width: 1440px) {
@@ -134,6 +174,29 @@ figcaption {
     font-size: 32px;
     line-height: 48px;
   }
+
+  .section2, .section3 {
+    padding: 80px 0;
+  }
+
+  .section3 {
+    height: 650px;
+  }
+
+  .section4 .container-cards {
+    padding-top: 300px;
+  }
+
+  .text-title2 {
+    font-size: 64px;
+    line-height: 78px;
+  }
+
+  .text-paragraph2 {
+    font-size: 32px;
+    max-width: 70%;
+    line-height: 48px;
+  }
 }
 
 /* TABLET */
@@ -159,6 +222,16 @@ figcaption {
   .fundo {
     gap: 14px;
   }
+
+  .section4 .container-cards {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    padding-top: 120px;
+  }
+
+  .text-paragraph2 {
+    max-width: 70%;
+  }
 }
 
 /* CELULAR */
@@ -167,6 +240,18 @@ figcaption {
   .fundo-mobile {
     display: none;
   }
+
+  .fundo-mobile2 {
+    display: none;
+  }
+
+  .text-content-mobile {
+    display: none;
+  }
+
+  .text-content-desktop {
+    text-align: center;
+  }
 }
 
 @media screen and (max-width: 480px) {
@@ -174,6 +259,24 @@ figcaption {
     display: none;
   }
 
+  .fundo-desktop2 {
+    display: none;
+  }
+
+  .text-content-desktop {
+    display: none;
+  }
+
+  .text-content-mobile {
+    text-align: center;
+  }
+
+  .fundo-mobile2 {
+    width: 100%;
+    display: flex;
+    padding: 50px 0;
+  }
+
   .text-title {
     font-size: 28px;
   }
@@ -212,5 +315,22 @@ figcaption {
   .section3 {
     height: 440px;
   }
+
+  .text-title2 {
+    font-size: 24px;
+  }
+
+  .text-paragraph2 {
+    max-width: 90%;
+  }
+
+  .section4 {
+    max-width: 100%;
+  }
+
+  .section4 .container-cards {
+    max-width: 90%;
+    margin: 0 auto;
+  }
 }