diff --git a/assets/styles/main.css b/assets/styles/main.css
index e9e0b0c..9b2364a 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -28,7 +28,7 @@ body{
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 73px 0;
+    padding: 73px 0 0;
 }
 .top-inforcard-subtitle{
     text-align: center;
@@ -56,6 +56,32 @@ body{
     width: 16%;
     min-width: 239px;
 }
+.top-cards{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 21px;
+    justify-content: center;
+    padding: 178px 20%;
+}
+.top-card{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 26px 26px 36px;
+    background: #FFF;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+.top-card-image{
+    display: block;
+    min-width: 5vw;
+    margin-bottom: 30px;
+}
+.top-card-description{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+}
 
 @media screen and (min-width: 2500px) {
     .page-header{
@@ -64,7 +90,7 @@ body{
 }
 
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 1025px) {
     .main-banner-desktop{
         display: none;
     }
@@ -84,10 +110,25 @@ body{
         max-width: 86%;
         padding: 0 0 73px;
     }
+    .top-cards{
+        padding: 90px 7%;
+    }
 }
 
 @media screen and (max-width: 992px){
     .top-infocard-image{
         width: 34%;
     }
+    /* top-cards */
+    .top-cards{
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media screen and (max-width: 540px) {
+    .top-cards{
+        grid-template-columns: 1fr;
+        padding: 90px 26px 80px;
+        gap: 24px;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 5f89870..60007bd 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,21 @@
 
                 <img class="top-infocard-image" src="./assets/imagens/top-infocard-image.png" alt="Imagem do infocard do topo"/>
             </section>
+
+            <section class="top-cards">
+                <figure class="top-card card-1">
+                    <img class="top-card-image" src="./assets/imagens/top-card-image-1.svg" alt="Primeira card do topo"/>
+                    <figcaption class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                </figure>
+                <figure class="top-card card-2">
+                    <img class="top-card-image" src="./assets/imagens/top-card-image-2.svg" alt="Primeira card do topo"/>
+                    <figcaption class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                </figure>
+                <figure class="top-card card-3">
+                    <img class="top-card-image" src="./assets/imagens/top-card image-3.svg" alt="Primeira card do topo"/>
+                    <figcaption class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                </figure>
+            </section>
         </main>
     </body>
     </html>
\ No newline at end of file