Correção do header e cards mobile

index.html

@@ -40,7 +40,7 @@
           alt="Imagem de um notebook  com um código de programação aberto"
         />
       </figure>
-      <!-- Topo Infocard -->
+      <!--  InfoCard do Topo -->
       <section class="top-infocard">
         <div class="top-infocard-text">
           <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
@@ -59,7 +59,7 @@
           alt="Imagem com desenho de três computadores com setas apontando para eles"
         />
       </section>
-      <!-- Card do topo -->
+      <!-- Card do Topo  -->
       <div class="top-cards">
         <figure class="top-card">
           <img
@@ -95,7 +95,7 @@
           </figcaption>
         </figure>
       </div>
-
+      <!-- Card do Meio  -->
       <div class="middle-cards">
         <figure class="middle-card middle-cards-mobile">
           <img
@@ -120,7 +120,7 @@
           />
         </figure>
       </div>
-
+      <!-- Card de baixo -->
       <div class="bottom-cards">
         <figure class="bottom-card">
           <img
@@ -175,7 +175,7 @@
           </figcaption>
         </figure>
       </div>
-
+      <!-- InfoCard de baixo -->
       <section class="bottom-infocards">
         <div class="bottom-infocard">
           <div class="bottom-infocard-text">
@@ -202,6 +202,7 @@
         />
       </section>
     </main>
+    <!-- Rodapé -->
     <footer class="page-footer">
       <nav class="nav-footer">
         <ul class="footer-icons">

styles/main.css

@@ -19,7 +19,7 @@ body {
 
 .header-logo {
   display: block;
-  width: 12%;
+  max-width: 12%;
 }
 
 /* Corpo da pagina */
@@ -30,7 +30,7 @@ body {
   width: 100%;
 }
 
-/* Topo Infocard  */
+/* InfoCard do Topo */
 
 .top-infocard {
   display: flex;
@@ -72,7 +72,7 @@ body {
   max-width: 17%;
 }
 
-/* Card do topo */
+/* Card do Topo  */
 
 .top-cards {
   display: flex;
@@ -103,6 +103,8 @@ body {
   text-align: center;
 }
 
+/* Card do Meio */
+
 .middle-cards {
   display: flex;
   gap: 39px;
@@ -121,6 +123,8 @@ body {
   width: 100%;
 }
 
+/* Card de baixo */
+
 .bottom-cards {
   display: flex;
   align-items: center;
@@ -151,6 +155,8 @@ body {
   line-height: 24px;
 }
 
+/* InfoCard de baixo  */
+
 .bottom-infocards {
   display: flex;
   flex-direction: column;
@@ -185,6 +191,8 @@ body {
   width: 70%;
 }
 
+/* Rodapé  */
+
 .page-footer {
   display: flex;
   flex-direction: column;
@@ -217,7 +225,10 @@ body {
   color: #bdbdbd;
 }
 
+/* Tela 4K */
 @media screen and (min-width: 2500px) {
+  /* Corpo da pagina */
+  /* InfoCard do Topo */
   .top-infocard-subtitle {
     font-size: 62px;
     line-height: 78px;
@@ -228,9 +239,27 @@ body {
     line-height: 116px;
   }
 
-  .top-infocard-description,
-  .top-card-description,
-  .bottom-card-description,
+  .top-infocard-description {
+    font-size: 32px;
+    line-height: 48px;
+  }
+
+  /* Card do Topo  */
+
+  .top-card-description {
+    font-size: 32px;
+    line-height: 48px;
+  }
+
+  /* Card de baixo */
+
+  .bottom-card-description {
+    font-size: 32px;
+    line-height: 48px;
+  }
+
+  /* InfoCard de baixo  */
+
   .bottom-infocard-description {
     font-size: 32px;
     line-height: 48px;
@@ -240,6 +269,9 @@ body {
     font-size: 64px;
     line-height: 78px;
   }
+
+  /* Rodapé  */
+
   .footer-text {
     font-size: 20px;
     line-height: 24px;
@@ -250,6 +282,7 @@ body {
   }
 }
 
+/* Remove banner mobile */
 @media screen and (min-width: 415px) {
   /* Corpo da pagina */
 
@@ -258,23 +291,30 @@ body {
     display: none;
   }
 
+  /* InfoCard de baixo  */
+
   .bottom-infocard-mobile {
     display: none;
   }
 }
 
+/* Tela Mobile */
 @media screen and (max-width: 1024px) {
   /* Cabeçalho */
   .header-logo {
-    width: 55%;
+    max-width: 55%;
   }
 
+  /* Corpo da pagina */
+  /* InfoCard do Topo */
+
   .top-infocard {
+    padding: 73px 28px 90px;
     width: 100%;
   }
 
-  .top-infocard-image {
-    max-width: 72%;
+  .top-infocard-text {
+    width: 86%;
   }
 
   .top-infocard-subtitle {
@@ -287,18 +327,16 @@ body {
     line-height: 33px;
   }
 
-  .top-infocard {
-    padding: 73px 28px 90px;
-  }
-
-  .top-infocard-text {
-    width: 86%;
-  }
-
   .top-infocard-description {
     text-align: center;
   }
 
+  .top-infocard-image {
+    max-width: 72%;
+  }
+
+  /* Card do Topo  */
+
   .top-cards {
     align-items: center;
     flex-direction: column;
@@ -306,9 +344,11 @@ body {
   }
 
   .top-card {
-    width: 84%;
+    width: 100%;
   }
 
+  /* Card do Meio */
+
   .middle-cards {
     flex-direction: row;
     flex-wrap: wrap;
@@ -320,21 +360,23 @@ body {
     top: 32px;
   }
   .middle-card-mobile {
-    width: 89%;
+    width: 96%;
     margin-top: 14px;
   }
 
   .middle-cards-mobile {
-    width: 43%;
+    width: 47%;
   }
 
+  /* Card de baixo */
+
   .bottom-cards {
     padding: 112px 23px 98px;
     flex-direction: column;
   }
 
   .bottom-card {
-    width: 89%;
+    width: 100%;
   }
 
   .bottom-card-image {
@@ -346,6 +388,8 @@ body {
     font-size: 14px;
   }
 
+  /* InfoCard de baixo  */
+
   .bottom-infocard-mobile {
     width: 100%;
   }
@@ -362,6 +406,9 @@ body {
   }
 
   .bottom-infocard-text {
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
     width: 85%;
   }
 
@@ -370,17 +417,25 @@ body {
     line-height: 29px;
   }
 
+  /* Rodapé  */
+
   .footer-text {
     width: 63%;
     text-align: center;
   }
 }
 
+/* Remove Banner Desktop */
 @media screen and (max-width: 414px) {
+  /* Corpo da pagina */
+  /* Banner Principal */
+
   .main-banner-desktop {
     display: none;
   }
 
+  /* InfoCard de baixo  */
+
   .bottom-infocard-desktop {
     display: none;
   }