feat(home): tratando a responsividade da main

src/index.html

@@ -56,6 +56,13 @@
           />
         </div>
 
+        <div class="imagePrincipal-mobile">
+          <img
+            src="/src/assets/images/Rectangle 9 (1).png"
+            alt="Imagem com um notebook"
+          />
+        </div>
+
         <section class="one">
           <h2>Lorem ipsum</h2>
           <h1>DOLOR SIT AMET</h1>
@@ -217,19 +224,19 @@
 
       <div class="container-imagesSecond">
         <div class="content-imageSecond">
-          <div class="imageSecond item1">
+          <div class="imageSecond img1">
             <img
               src="/src/assets/images/Rectangle 13.png"
               alt="notebook abrindo de frente"
             />
           </div>
-          <div class="imageSecond item2">
+          <div class="imageSecond img2">
             <img
               src="/src/assets/images/Rectangle 16.png"
               alt="notebook abrindo de frente"
             />
           </div>
-          <div class="imageSecond item3">
+          <div class="imageSecond img3">
             <img
               src="/src/assets/images/Rectangle 17.png"
               alt="notebook abrindo de lado"
@@ -394,7 +401,8 @@
           </div>
         </div>
 
-        <section class="two">
+        <div class="container-sectionTwo">
+          <section class="two item1">
             <h2>Lorem ipsum dolor sit amet</h2>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
@@ -406,15 +414,24 @@
             </p>
           </section>
   
-        <div class="container-imageSecondFooter">
+          <div class="container-imageSecondFooter item2">
             <div class="content-imageSecondFooter">
               <img
                 src="/src/assets/images/Rectangle 15.png"
                 alt="Imagem embaçada de computadores"
               />
             </div>
+
+            <div class="content-imageSecondFooter-mobile">
+              <img
+                src="/src/assets/images/Rectangle 15 (1).png"
+                alt="Imagem embaçada de computadores"
+              />
             </div>
           </div>
+        </div>
+        
+      </div>
     </main>
 
     <footer>

src/style.css

@@ -142,15 +142,15 @@ section.one {
   margin: 10px;
 }
 
-.item1 {
+.img1 {
   grid-area: foto1;
 }
 
-.item2 {
+.img2 {
   grid-area: foto2;
 }
 
-.item3 {
+.img3 {
   grid-area: foto3;
 }
 
@@ -200,6 +200,22 @@ section.one {
   text-align: center;
 }
 
+.container-sectionTwo {
+  display: grid;
+
+  grid-template-columns: auto;
+  grid-template-rows: auto auto;
+  grid-template-areas: "item1" "item2";
+}
+
+.item1 {
+  grid-area: item1;
+}
+
+.item2 {
+  grid-area: item2;
+}
+
 section.two {
   width: 40%;
   margin: 0 auto 3%;
@@ -267,3 +283,93 @@ section.two h2 {
   font-size: 11px;
 }
 
+@media only screen and (max-width: 414px){
+  .imagePrincipal, .content-imageSecondFooter {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 415px){
+  .imagePrincipal-mobile, .content-imageSecondFooter-mobile {
+    display: none;
+  }
+
+  .imagePrincipal, .content-imageSecondFooter {
+    display: flex;
+  }
+}
+
+@media only screen and (max-width: 1024px){
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+  }
+
+  .imagePrincipal-mobile {
+    width: 100%;
+  }
+
+  .imagePrincipal-mobile img {
+    width: 100%;
+  }
+
+  .content-imageSecondFooter-mobile {
+    width: 100%;
+    margin-bottom: 50px;
+  }
+
+  .content-imageSecondFooter-mobile img {
+    width: 100%;
+  }
+
+  .container-imageSecond svg {
+    width: 60%;
+  }
+
+  section.one, section.two {
+    width: 100%;
+    padding-left: 3%;
+    padding-right: 3%;
+  }
+
+  section.one p, section.two p {
+    text-align: center;
+    font-size: 1.1rem;
+  }
+
+  .content-imageSecond {
+    grid-template-columns: auto auto;
+    grid-template-rows: 1fr 2fr;
+    grid-template-areas: "foto2 foto1" "foto3 foto3";
+  }
+
+  .content-cardsSecond {
+    flex-direction: column;
+  }
+
+  .container-sectionTwo {
+    grid-template-areas: "item2" "item1";
+  }
+
+  .content-cards {
+    width: 100%;
+    flex-direction: column;
+    width: 88%;
+  }
+
+  .cardOne {
+    max-width: 380px;
+    margin: 11px auto;
+  }
+
+  .cardTwo {
+    max-width: 380px;
+  }
+
+  .container-imageSecondFooter {
+    margin-bottom: 6%;
+  }
+}