From 2433beb8b1b6f875f84880ce2ef7e274d135d836 Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Thu, 13 Oct 2022 14:25:25 -0300
Subject: [PATCH] fix(home): ajusta responsividade para telas 4K

---
 index.html          |  12 +--
 src/styles/main.css | 175 +++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 169 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index f53cce4..44a67c4 100644
--- a/index.html
+++ b/index.html
@@ -67,9 +67,9 @@
 
       <div class="image-grid-container">
         <div class="image-grid">
-          <img class="grid-image-desktop" src="./src/assets/img/grid-image-desktop-01.png" alt="Primeira Imagem do Grid de Imagens"/>
-          <img class="grid-image-desktop" src="./src/assets/img/grid-image-desktop-02.png" alt="Segunda Imagem do Grid de Imagens"/>
-          <img class="grid-image-desktop" src="./src/assets/img/grid-image-desktop-03.png" alt="Terceira Imagem do Grid de Imagens"/>
+          <img class="grid-image-desktop grid-image-desktop-01" src="./src/assets/img/grid-image-desktop-01.png" alt="Primeira Imagem do Grid de Imagens"/>
+          <img class="grid-image-desktop grid-image-desktop-02" src="./src/assets/img/grid-image-desktop-02.png" alt="Segunda Imagem do Grid de Imagens"/>
+          <img class="grid-image-desktop grid-image-desktop-03" src="./src/assets/img/grid-image-desktop-03.png" alt="Terceira Imagem do Grid de Imagens"/>
 
           <img class="grid-image-mobile grid-image-mobile-01" src="./src/assets/img/grid-image-mobile-01.png" alt="Primeira Imagem do Grid de Imagens"/>
           <img class="grid-image-mobile grid-image-mobile-02" src="./src/assets/img/grid-image-mobile-02.png" alt="Segunda Imagem do Grid de Imagens"/>
@@ -127,19 +127,19 @@
       <footer class="page-footer">
         <ul class="footer-icons">
           <li class="footer-icon">
-            <a href="#" target="_blank">
+            <a href="https://www.instagram.com/m3.ecommerce/" target="_blank">
               <img src="./src/assets/img/instagram-icon.png" alt="Ícone do Instagram" />
             </a>
           </li>
 
           <li class="footer-icon">
-            <a href="#" target="_blank">
+            <a href="https://www.facebook.com/digitalm3" target="_blank">
               <img src="./src/assets/img/facebook-icon.png" alt="Ícone do Facebook" />
             </a>
           </li>
 
           <li>
-            <a href="#" target="_blank">
+            <a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA" target="_blank">
               <img src="./src/assets/img/youtube-icon.png" alt="Ícone do Youtube" />
             </a>
           </li>
diff --git a/src/styles/main.css b/src/styles/main.css
index 29c8db1..a799e82 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -47,7 +47,7 @@ body {
 .top-section-subtitle {
   text-transform: uppercase;
   /* line-height: 38px; */
-  font-size: 32px;
+  font-size: 2rem;
   font-weight: 400;
 }
 
@@ -55,14 +55,13 @@ body {
   margin-bottom: 28px;
   text-transform: uppercase;
   /* line-height: 58px; */
-  font-size: 48px;
+  font-size: 3rem;
   font-weight: 500;
 }
 
 .top-section-description {
   max-width: 54%;
-  line-height: 24px;
-  font-size: 16px;
+  line-height: 1.5rem;
 }
 
 .top-section-image {
@@ -100,8 +99,7 @@ body {
 }
 
 .top-card-description {
-  font-size: 16px;
-  line-height: 24px;
+  line-height: 1.5rem;
   text-align: center;
 }
 
@@ -109,6 +107,7 @@ body {
 .image-grid-container {
   display: flex;
   justify-content: center;
+  /* margin: 0 auto; */
   background: #E0E0E0;
 }
 
@@ -117,15 +116,45 @@ body {
   display: flex;
   justify-content: center;
   gap: 40px;
+  /* margin: 0 auto;
+  width: 92%;
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  grid-template-areas:
+  "image1 image2 image3";
+  column-gap: 40px; */
+  /* row-gap: 24px; */
+
+
   position: relative;
   top: 62px;
 }
 
+/* .grid-image-desktop {
+  max-width: 30%;
+}
+
+.grid-image-desktop-01 {
+  grid-area: image1;
+  /* justify-self: center; */
+/*}
+
+.grid-image-desktop-02 {
+  grid-area: image2;
+  /* justify-self: center; */
+/*}
+
+.grid-image-desktop-03 {
+  grid-area: image3;
+  /* justify-self: center; */
+/*} */
+
 .grid-image-desktop,
 .grid-image-mobile {
   display: block;
 }
 
+
 /* ----- LOWER SECTION ----- */
 .lower-section {
   display: grid;
@@ -143,6 +172,7 @@ body {
   /* max-width: 92%; */
   margin: 192px 0 108px;
   grid-area: cards;
+  /* justify-self: center; */
   display: flex;
   justify-content: center;
   gap: 16px;
@@ -167,8 +197,7 @@ body {
 
 .lower-card-description {
   padding: 0 32px;
-  font-size: 16px;
-  line-height: 24px;
+  line-height: 1.5rem;
   text-align: center;
 }
 
@@ -182,15 +211,14 @@ body {
 
 .lower-section-subtitle {
   /* line-height: 39px; */
-  font-size: 32px;
+  font-size: 2rem;
   font-weight: 600;
   text-align: center;
 }
 
 .lower-section-description {
   max-width: 28%;
-  line-height: 24px;
-  font-size: 16px;
+  line-height: 1.5rem;
   text-align: center;
 }
 
@@ -225,11 +253,134 @@ body {
   color: #BDBDBD;
 }
 
-/* ----- RESPONSIVIDADE ----- */
+/* ---------- RESPONSIVIDADE ---------- */
+
+/* ----- TELAS GRANDES ----- */
 @media screen and (min-width: 2500px) {
 
+  /* ----- Font-size padrão ----- */
+  p {
+    font-size: 2rem;
+  }
+
+  /* ----- Header ----- */
+  .page-header {
+    padding: 100px 0;
+  }
+  
+  .header-logo {
+    transform: scale(2);
+  }
+  
+  /* ----- Top Section ----- */
+  .top-section {
+    padding: 148px 0 424px;
+  }  
+
+  .top-section-text {
+    margin-bottom: 306px;
+  }
+
+  .top-section-subtitle {
+    font-size: 4rem;
+  }
+
+  .top-section-title {
+    margin-bottom: 56px;
+    font-size: 6rem;  
+  }
+
+  .top-section-description {
+    line-height: 3rem;
+    font-size: 2rem;
+  }
+
+  .top-section-image {
+    margin-bottom: 518px;
+    transform: scale(2);
+  }
+
+  .top-section-cards {
+    gap: 44px;
+  }
+  
+  .top-card {
+    padding: 114px 104px 94px;
+  }
+  
+  .top-card-image {
+    margin-bottom: 102px;
+    transform: scale(2);
+  }
+  
+  .top-card-image-01 {
+    padding: 20px 0;
+  }
+
+  .top-card-description {
+    line-height: 3rem;
+  }
+
+  /* ----- Image Grid ----- */
+  .image-grid-container {
+    transform: scale(2);
+  }
+
+  /* ----- Lower Section ----- */
+  .lower-section-cards {
+    margin: 714px 0 216px;
+  }
+
+  .lower-card {
+    padding: 122px 0 128px;
+    gap: 32px;
+  }
+
+  .lower-card-image {
+    margin-bottom: 84px;
+    transform: scale(2);
+  }
+
+  .lower-card-description {
+    padding: 0 64px;
+    line-height: 3rem;
+  }
+
+  .lower-section-text {
+    margin-bottom: 238px;
+  }
+
+  .lower-section-subtitle {
+    font-size: 4rem;
+  }
+
+  .lower-section-description {
+    line-height: 3rem;
+  }
+
+  .lower-section-image-desktop {
+    margin: 0 auto 370px;;
+    transform: scale(2);
+  }
+
+  /* ----- Footer ----- */
+  .page-footer {
+    padding: 80px 0;
+  }
+
+  .footer-icons {
+    gap: 44px;
+    margin-bottom: 56px;
+    transform: scale(2);
+  }
+
+  .footer-text {
+    line-height: 1.5rem;
+    font-size: 1.25rem;
+  }
 }
 
+/* ------------------------ */
 @media screen and (min-width: 769px) {
   .main-banner-mobile,
   .grid-image-mobile,