Adiciona os card do meio desktop e mobile

assets/styles/main.css

@@ -62,6 +62,7 @@ body {
 }
 
 .top-card { 
+    width: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px ;
@@ -92,6 +93,45 @@ body {
     text-align: center;
 }
 
+.banner-quite {
+    width: 1920PX;
+    height: 530PX;
+    background: #E0E0E0;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px ;
+    padding: 62PX 72PX 62PX;
+}
+
+.imagem-quite {
+    width: 566px;
+    max-height: 530px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 72px 39px 62px 0%;
+}
+
+.banner-quite-imagem {
+    display: block;
+    margin-bottom: 26px;
+    width: 400PX;
+    height: 400PX;
+}
+
+@media screen and (maw-width: 1400px) {
+    .imagem-quite {
+        flex-direction: column;
+    }
+}
+
+@media screen and (max-width: 566px) {
+    .banner-quite {
+        grid-template-columns: 1fr;
+        padding: 36px 26px;
+    }
+    
+}
 @media screen and (max-width: 768px) {
     .top-card {
         grid-template-columns: 1fr;
@@ -106,20 +146,23 @@ body {
     }
 }
 
-@media screen (max-width: 1400px) {
+@media screen and (max-width: 1200px) {
     .top-infocard {
         flex-direction: column;
     }
+
     .infocard text {
         margin-right: 0;
     }
     .text-primario{
         font-size: 20px;
     }
+
     .text-secundario{
         margin-bottom: 24px;
         font-size: 28px;
     }
+
     .text-paragraph {
         width: 100%;
         font-size: 20px;    
@@ -129,6 +172,7 @@ body {
         max-width: 315px;
     }
 }
+
 @media (min-width: 1399px) {
     .main-banner-mobile {
         display: none;