Adicionando cards e textos no parte principal do projeto

index.html

@@ -22,17 +22,33 @@
         <img class="main-banner main-banner-mobile" src="./assests/main-banner-mobile.png" alt="Banner do topo Mobile">
       </figure>
     </div>
-    <section class="top-information">
+    <section class="middle-information">
-      <div class="top-text">
+      <div class="middle-text">
-        <h2 class="top-information-subtitle">Lorem ipsum</h2>
+        <h2 class="middle-information-subtitle">Lorem ipsum</h2>
-        <h1 class="top-information-title">dolor sit amet</h1>
+        <h1 class="middle-information-title">dolor sit amet</h1>
-        <p class="top-information-description">
+        <p class="middle-information-description">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. 
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. 
         </p>
       </div>
+      <figure>
+        <img class="main-image-desktop" src="./assests/main-image-desktop.png" alt="Imagem da main Desktop">
+        <img class="main-image-mobile"src="./assests/main-image-mobile.png" alt="Imagem da main Mobile">
+      </figure>
+      <div class="middle-cards">
+        <figure>
+            <img src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+        </figure>
+     </div>
     </section>
 
     
+   
+    <div>
+    
+    </div>
+    
+    
   </main>
 </body>
 </html>

main.css

@@ -9,7 +9,7 @@
 body {
   font-family: 'inter', sans-serif;
 }
-/* estilazação do fundo */
+/* estilização do fundo */
 .head-logo {
   display: flex;
   flex-direction: column;
@@ -27,31 +27,32 @@ body {
   display: block;
 }
 
-.top-information {
+.middle-information {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: 74px 0 180px;
 }
 
 /* estilização para caixa do texto ( não coloquei em 40% para quebrar no paragrafo do figma */
-.top-text {
+.middle-text {
   display:flex; 
   flex-direction: column;
   align-items: center;
-  width: 766px; 
+  width: 40%; 
-  padding: 74px 0 580px;
+  margin-bottom: 74px;
 }
 
 
-.top-information-subtitle {
+.middle-information-subtitle {
   font-weight: 400;
   font-size: 32px;
   line-height: 39px;
   text-transform: uppercase;
 }
 
-.top-information-title {
+.middle-information-title {
   font-weight: 500;
   font-size: 48px;
   line-height: 58px;
@@ -60,13 +61,38 @@ body {
 }
 
 @media screen and (max-width: 414px) {
-  .main-banner-desktop {
+  .main-banner-desktop, .main-image-desktop {
       display: none;
   }
 }
 
 @media screen and (min-width:415px ) {
-  .main-banner-mobile {
+  .main-banner-mobile, .main-image-mobile {
     display: none;
   }
 }
+
+  @media screen and (max-width:1024px) {
+  
+    .middle-text {
+    width: 100%;
+    max-width: 112%;
+    text-align: center;
+  }
+
+  .middle-information {
+    padding: 74px 28px 90px;
+  }
+
+  .middle-information-subtitle {
+    font-size: 20px;
+    line-height: 24px;
+  }
+
+  .middle-information-title {
+    font-size: 28px;
+    line-height: 34px;
+  }
+
+}
+