Adicionando responsividade

css/style.css

@@ -45,7 +45,6 @@ p {
 
 .text-div h2 {
   margin-top: 3rem;
-  font-family: "Inter";
   font-style: normal;
   font-weight: 400;
   font-size: 2rem;
@@ -102,7 +101,9 @@ p {
   align-items: center;
 }
 
-.pc-figure img {
+.pc1,
+.pc2,
+.pc3 {
   margin: 2rem;
   width: 26.375rem;
   height: 23.125rem;
@@ -164,3 +165,125 @@ p {
   text-transform: uppercase;
   color: white;
 }
+
+.b {
+  display: none;
+}
+
+.oculos {
+  display: none;
+}
+
+@media screen and (max-width: 414px) {
+
+  .a {
+    display: none;
+  }
+
+  .b {
+    height: 37.375rem;
+  }
+
+  .text-div {
+    display: flex;
+    max-width: 100vw;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-flow: column wrap;
+  }
+
+  .text-div h1 {
+    font-weight: 400;
+    font-size: 1.75rem;
+    line-height: 2.125rem;
+  }
+
+  .text-div h2 {
+    font-weight: 400;
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+
+  .text-div p {
+    font-weight: 400;
+    width: 21.063rem;
+    text-align: center;
+    line-height: 1.5rem;
+    margin: 0;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .card-div {
+    display: flex;
+    align-items: center;
+    flex-flow: column;
+  }
+
+  .pc-figure {
+    flex-flow: column;
+  }
+
+  .pc2 {
+    margin: 0;
+    order: 1;
+    width: 11.063rem;
+    height: 11.063rem;
+    margin-left: 0.6rem;
+  }
+
+  .pc1 {
+    margin: 0;
+    order: 2;
+    width: 11.063rem;
+    height: 11.063rem;
+  }
+  .pc3 {
+    order: 3;
+    width: 23rem;
+  }
+
+  .ordering {
+    flex-flow: row nowrap;
+  }
+
+  .oculos {
+    display: flex;
+  }
+
+  .content-div .oculos {
+    width: 25.875rem;
+    height: 25.875rem;
+  }
+
+  .text-div .content {
+    width: 21.875rem;
+    margin-bottom: 6rem;
+  }
+
+  .text-div h3 {
+    font-weight: 600;
+    font-size: 1.75rem;
+    line-height: 1.813rem;
+  }
+
+  .last-figure{
+    display: none;
+  }
+  
+  .footer{
+    text-align: center;
+  }
+
+  .copyright{
+    width: 16.313rem;
+  }
+}
+
+
+@media screen and (max-width: 290px) {
+
+  .logo-div{
+    
+  }
+}

html/LandingPage.html

@@ -28,11 +28,17 @@
     </header>
     <figure class="hero-figure">
       <img
-        class="hero"
+        class="hero a"
         src="/assets/Rectangle 9.png"
         alt="Computador sobre uma
       mesa"
       />
+      <img
+        class="hero b"
+        src="/assets/Rectangle 9 (2).png"
+        alt="Computador sobre uma
+      mesa"
+      />
     </figure>
     <section id="text-section">
       <div class="text-div">
@@ -71,9 +77,23 @@
     </div>
 
     <figure class="pc-figure">
-      <img src="../assets/Rectangle 13.png" alt="Imagem de um Computador" />
-      <img src="../assets/Rectangle 16.png" alt="Imagem de um Computador" />
-      <img src="../assets/Rectangle 17.png" alt="Imagem de um Computador" />
+      <div class="ordering">
+        <img
+          class="pc1"
+          src="../assets/Rectangle 13.png"
+          alt="Imagem de um Computador"
+        />
+        <img
+          class="pc2"
+          src="../assets/Rectangle 16.png"
+          alt="Imagem de um Computador"
+        />
+      </div>
+      <img
+        class="pc3"
+        src="../assets/Rectangle 17.png"
+        alt="Imagem de um Computador"
+      />
     </figure>
 
     <div class="content-div">
@@ -115,6 +135,10 @@
           </p>
         </div>
       </div>
+
+      <figure class="oculos-figure">
+        <img class="oculos" src="../assets/oculos.png" alt="oculos numa mesa desfocada">
+      </figure>
       <div class="text-div">
         <h3>Lorem ipsum dolor sit amet</h3>
         <p class="content">