Adiciona os cards do topo desktop e mobile

assets/style/main.css

@@ -59,6 +59,33 @@ body{
   .main-banner-mobile {
     display: none;   
   }
+  .top-cards{
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    background: #F0F0F0;
+    gap: 20px;
+    justify-content: center;
+    padding: 178px 0 80px 0;
+  }
+  .top-card{    
+    background: #FFFFFF;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 26px 26px 34px;
+    
+  }
+  .top-card-image{
+    display: block;
+    margin-bottom: 26px;
+  }
+  .top-card-description{ 
+    max-width: 300px;
+    text-align: center;
+    line-height: 24px;
+    font-size: 16px;
+  }
 @media (max-width: 1024px) {
   .main-banner-desktop {
     display: none;
@@ -90,3 +117,11 @@ body{
         width: 100%;
     }
 }
+@media screen and (max-width:1024px){
+    .top-cards{
+        grid-template-columns: 1fr;
+        padding: 90px 32px 80px;
+    }
+    
+    
+}

index.html

@@ -29,6 +29,22 @@
                     </div>              
                     <img class="top-infocard-image" src="assets/image/top-infocard-image.png" alt="Banner do infocard do topo"/>
                 
+            </section>
+            <section class="top-cards">
+                <div class="top-card">
+                    <img class="top-card-image" src="assets/image/Top-card-image-01.png" alt="Imagem do primeiro card do topo"/>
+                    <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                <div class="top-card">
+                    <img class="top-card-image" src="assets/image/Top-card-image-02.png" alt="Imagem do segundo card do topo"/>
+                    <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                <div class="top-card">
+                    <img class="top-card-image" src="assets/image/Top-card-image-03.png" alt="Imagem do terceiro card do topo"/>
+                    <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                
+
             </section>
         </main>