feat(mobile) primeiro commit da parte responsiva

refactor(mudança de class) estava com problema em dois grupos com mesma class linha (41 e 85) não conseguia dar o flex-direction:column;

index.html

@@ -15,13 +15,16 @@
         <figure class="logo">
                <a href="/">
                    <img class="m3" src="imagens/Logo-M3Academy 1.svg" alt="Logo-M3Academy" width="100%">
+                   
                </a>
         </figure>
        </header>
        <main>
           <figure>
-                  <img src="imagens/Rectangle 9 (6).png" alt="imagem de computador" width="100%">
+                  <img class="img-header" src="imagens/Rectangle 9 (6).png" alt="imagem de computador" width="100%">
+                  <img class="img-responsivo" src="imagens/notebookresponsivo.png" alt="imagem notebook" width="100%">
          </figure>
+         
                        <div class="texto1">
                            <h3>Lorem ipsum</h3> 
 
@@ -79,7 +82,7 @@
                           
                    </div>
 
-                 <section class="card-compra">
+                 <section class="card-compra2">
                        <div class="cards">
                                  <img src="imagens/dinheiro.png" alt="imagem de dinheiro">
 

style.css

@@ -88,6 +88,19 @@ h3{
     text-align: center;
  }
 
+ .card-compra2{
+
+    margin-top: 179px;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    margin: 0 auto;
+    width: 100%;
+    height: 287.68px;
+    
+    gap: 21px;
+}
+
   .cards{
    
     padding-top: 36px;
@@ -178,4 +191,70 @@ h3{
 .centralizar a{
     padding:21px;
 }
+/* início do responsivo*/
 
+@media (max-width:1024px){
+   .img-header{ 
+      display: none;
+
+}
+
+.texto1{
+ display: flex;
+ flex-direction: column;
+ margin: 73px auto;
+ height: auto;
+ width: 70%;
+}
+h3{
+     font-size: 140%;
+}
+.sub-titulo{
+    margin-top: -15px;
+    font-size: 180%;
+    }
+
+    .paragrafo1{
+        
+        font-size: 100%;
+        margin-top: 5px;
+    }
+
+    .pcs img{
+        width: 86%;
+        max-width: 239px;
+        display: flex;
+        justify-content: center;
+        margin-top: 84px;
+    }
+
+    .card-compra{
+         margin-top: 90.62px;
+         display: flex;
+         flex-direction: column ;
+        
+         width:90%;
+         height: 900px;
+         justify-content: center;
+         align-items: center;
+        
+    }
+
+    .card{
+     
+         margin-top: -10px ;
+         width: 88.6%;
+         height:287.95px;
+         max-width: 350px;
+       
+        background: #FFFFFF;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    
+        font-family: 'Inter';
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        text-align: center;
+     }
+
+    }