assets/styles.css

@@ -4,6 +4,11 @@
     box-sizing: border-box;
 }
 
+img{
+    max-width:100%;
+    height:auto;
+  }
+
 body {
     color: #000000;
     font-family: 'Inter', sans-serif;
@@ -80,7 +85,7 @@ body {
     grid-template-columns: repeat(3, max-content);
     gap: 20px;
     justify-content: center;
-    padding: 0 0 80px;
+    padding: 0 0;
 }
 
 .top__card {
@@ -105,23 +110,54 @@ body {
 }
 
 
+/* BOTTOM CARDS */
+
+.bottom__cards {
+    background: #E0E0E0;
+    padding: 0 72px;
+    margin: 80px 0 191px;
+}
+
+.bottom__cards-container {
+    width: 100%;
+    position: relative;
+    display: grid;
+    justify-content: center;
+    margin: 0 auto;
+    grid-template-columns: repeat(3, 1fr);
+    transform: translateY(4rem); 
+    gap: 40px;
+  
+}
+
+.bottom__card img {
+    width: 100%;
+    height: auto;
+}
+
+
+.bottom__card-image {
+    display: block;
+}
+
+
+.bottom-card-image-3 {
+    grid-column: initial;
+}
+
+
+
+
+
+
+
 
 /* MEDIAS QUERIES */
 
-@media screen and (min-width: 769px) and (max-width: 1200px) {
-    .top-cards {
-        grid-template-columns: repeat(2, max-content);
-    }
-}
-
-@media screen and  (max-width: 1200px) {
-    .top__cards {
-        grid-template-columns: 1fr;
-        padding: 0 32px 80px;
-    }
-}
-
 @media screen and  (max-width: 1024px) {
+
+    /* MAIN BANNER */
+
     .main__banner-desktop {
         display: none;
     }
@@ -130,9 +166,9 @@ body {
         display: block;
         width: 100%;
     }
-}
 
-@media screen and  (max-width: 992px) {
+    /* TOP CARDS */
+
     .top__text {
         flex-direction: column;
         padding: 88px 32px 90px;
@@ -161,12 +197,67 @@ body {
     .top__infocard-description {
         text-align: center;
     }
-}
+
+    .top__cards {
+        display: grid;
+        grid-template-columns: repeat(3, max-content);
+        gap: 20px;
+        justify-content: center;
+        padding: 0 0;
+    }
     
+    .top__card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 26px 26px 34px; 
+        background: #FFFFFF;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    }
+
+    /* BOTTOM CARDS */
+    
+    .bottom__cards {
+        padding: 0 24px;
+        margin-bottom: 112px;
+    }
+    
+    .bottom__cards-container {
+        gap: 24px 14px;
+        grid-template-columns: repeat(2, 1fr);
+        transform: translateY(2rem);
+    }
+
+    .bottom__card img {
+        width: 100%;
+    }
+
+    .bottom__card-3 {
+        grid-column: 1/3;
+    }
+}
+
+
+@media screen and (min-width: 769px) and (max-width: 1200px) {
+    .top-cards {
+        grid-template-columns: repeat(2, max-content);
+    }
+}
+
+
+@media screen and  (max-width: 1200px) {
+    .top__cards {
+        grid-template-columns: 1fr;
+        padding: 0 32px;
+    }
+}
+
+
 
 @media screen and (min-width: 993px ) and (max-width: 1280px) {
-    .top-infocard-text {
+    .top__infocard-text {
         max-width: 520px;
-        margin-right: 70px;
     }
-}
+}
+
+

index.html

@@ -48,6 +48,21 @@
                 </div>
             </section>
 
+            <section class="bottom__cards">
+                <div class="bottom__cards-container">
+                    <figure class="bottom__card bottom__card-1">
+                        <img class="bottom__card-image" src="./assets/images/bottom-image-1.png" alt="Imagem do primeiro card de baixo">
+                    </figure>
+    
+                    <figure class="bottom__card bottom__card-2">
+                        <img class="bottom__card-image" src="./assets/images/bottom-image-2.png" alt="Imagem do segundo card de baixo">
+                    </figure>
+    
+                    <figure class="bottom__card bottom__card-3">
+                        <img class="bottom__card-image" src="./assets/images/bottom-image-3.png" alt="Imagem do teceiro card de baixo">
+                    </figure>
+                </div>
+            </section>
         </main>
 </body>
 </html>