feat: Melhorando responsividade do mobile e tablet e desktop

src/components/ContainerBreadCrumbs/style.module.css

@@ -45,11 +45,7 @@
   margin-right: 0.547rem;
 }
 
-@media only screen and (max-width: 1024px) {
-  .contentWrapper {
-    width: 100%;
-    padding: 1.875rem 1rem;
-  }
+@media only screen and (max-width: 1280px) {
 
   .contentBreadCrumb li {
     font-size: 0.75rem !important;
@@ -62,4 +58,11 @@
   .contentBreadCrumb li img[alt="seta para a direita"]{
     max-width: 8px;
   }
+}
+
+@media only screen and (max-width: 1024px) {
+  .contentWrapper {
+    width: 100%;
+    padding: 1.875rem 1rem;
+  }
 }

src/components/Footer/ContainerFooter/style.module.css

@@ -1,15 +1,3 @@
-@media only screen and (max-width: 1024px) {
-  .containerFooter {
-    display: none;
-  }
-}
-
-@media only screen and (min-width: 1025px) {
-  .containerFooter {
-    display: flex;
-  }
-}
-
 .containerFooter {
   width: 100%;
   
@@ -98,4 +86,27 @@
   display: flex;
   gap: 0.625rem;
   margin-bottom: 0.75rem;
+}
+
+@media only screen and (max-width: 1024px) {
+  .containerFooter {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 1280px) {
+  .listIcons svg {
+    max-width: 35px;
+    max-height: 35px;
+  }
+
+  .contentListIconsWrapper span {
+    font-size: 0.875rem;
+  }
+}
+
+@media only screen and (min-width: 1025px) {
+  .containerFooter {
+    display: flex;
+  }
 }

src/components/Footer/ContainerFooterInfo/style.module.css

@@ -20,6 +20,10 @@
 
 .contentInfoFooter {
   grid-area: info;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  max-width: 234px;
 }
 
 .contentInfoFooter span,
@@ -29,12 +33,18 @@
   line-height: 23.44px;
 }
 
-.contentInfoFooter span {
-  max-width: 467px;
-}
-
 .contentIconsPay {
   grid-area: iconPay;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.contentIconsPay span{
+  width: 1px;
+  height: 24px;
+  border: 1px solid var(--white);
 }
 
 .contentVtexIcon span,
@@ -48,6 +58,9 @@
 
 .iconsVtexAndM3 {
   grid-area: logVtexAnM3;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }
 
 .contentVtexIcon,
@@ -66,6 +79,39 @@
   width: 40.78%;
 }
 
+
+@media only screen and (min-width: 1281px) {
+
+  .contentInfoFooter {
+    max-width: 467px;
+  }
+}
+
+@media only screen and (max-width: 1280px) {
+
+  .contentInfoFooter {
+    max-width: 234px;
+  }
+
+  .contentInfoFooter span,
+  .contentVtexIcon span,
+  .contentM3Icon span {
+    font-size: 0.625rem;
+  }
+
+  .contentIconsPay img {
+    width: 36px;
+  }
+
+  .contentVtexIcon img {
+    width: 44.92px;
+  }
+
+  .contentM3Icon img {
+    width: 17px;
+  }
+}
+
 @media only screen and (max-width: 1024px) {
   .containerFooterInfo {
     display: flex;
@@ -110,7 +156,7 @@
     border-right: 1px solid var(--white);
   }
 
-  .contentInfoFooter span{
+  .contentInfoFooter span {
     font-size: 0px;
   }
 
@@ -125,6 +171,7 @@
   .iconsVtexAndM3 {
     padding: 0.938rem 0;
     display: flex;
+    justify-content: flex-start;
   }
 
   .contentVtexIcon,

src/components/Footer/ContainerNewsLetter/style.module.css

@@ -42,6 +42,32 @@
   font-size: 1.5rem;
   font-weight: 700;
   padding: 0.875rem 1.25rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 4px 0 #00000040;
+}
+
+@media only screen and (max-width: 1280px) {
+  .contentNewsLetter {
+    min-width: 474px;
+  }
+
+  .contentNewsLetter h3 {
+    font-size: 1.125rem;
+  }
+
+  .contentNewsLetter form input {
+    height: 42px;
+    font-size: 0.875rem;
+  }
+
+  .contentNewsLetter form input::placeholder {
+    font-size: 0.875rem;
+  }
+
+  .contentNewsLetter form button {
+    height: 42px;
+    font-size: 0.75rem;
+  }
 }
 
 @media only screen and (max-width: 1024px) {
@@ -86,5 +112,17 @@
     width: 100%;
     margin-top: 1rem;
     font-size: 0.875rem;
+    border-radius: none;
+    box-shadow: none;
+  }
+}
+
+@media only screen and (max-width: 340px) {
+
+  .contentNewsLetter form span {
+    top: -11px;
+    right: 1px;
+
+    font-size: 0.5rem;
   }
 }

src/components/Header/ContainerList/style.module.css

@@ -29,7 +29,7 @@
   text-decoration: none;
   color: var(--white);
   text-transform: uppercase;
-  font-size: 28px;
+  font-size: 1.75rem;
   font-weight: 500;
 }
 

src/components/Header/ContainerPrincipal/style.module.css

@@ -79,7 +79,7 @@
   outline: none;
 }
 
-.contentSearch span button img {
+.contentSearch span button svg {
   width: 100%;
 }
 
@@ -98,7 +98,7 @@
 }
 
 .contentLogin a {
-  font-size: 28px;
+  font-size: 1.75rem;
   font-weight: 400;
   text-decoration: none;
   color: var(--white);
@@ -111,6 +111,30 @@
   border: none;
 }
 
-.miniCart img {
+.miniCart svg {
   width: 100%;
+}
+
+@media only screen and (max-width: 1280px) {
+  .contentLogo figure {  
+    max-width: 136px;
+  }
+
+  .contentSearch span {
+    width: 100%;
+    height: 32px;
+    position: relative;
+  }
+
+  .contentSearch span button {
+    width: 18px;
+  }
+
+  .contentLogin a {
+    font-size: 0.875rem;
+  }
+
+  .miniCart {
+    max-width: 28px;
+  }
 }

src/components/TopButton/style.module.css

@@ -9,4 +9,23 @@
   height: 66px;
   background-color: var(--gray-300);
   border-radius: 50%;
+}
+
+.topButton span svg {
+  width: 30px;
+  height: 13px;
+}
+
+@media only screen and (max-width: 1024px) {
+  .topButton {
+    right: 16px;
+    bottom: 55px;
+    width: 34px;
+    height: 34px;
+  }
+
+  .topButton span {
+    width: 12px;
+    height: 16px;
+  }
 }

src/components/WhatsappButton/style.module.css

@@ -4,4 +4,22 @@
   bottom: 220px;
   width: 66px;
   height: 66px;
+}
+
+.WhatsappButton span{
+  width: 66px;
+  height: 66px;
+}
+
+.WhatsappButton span svg{
+  width: 100%
+}
+
+@media only screen and (max-width: 1024px) {
+  .WhatsappButton {
+    right: 16px;
+    bottom: 117px;
+    width: 34px;
+    height: 34px;
+  }
 }

src/global.css

@@ -37,13 +37,39 @@ body {
   position: relative;
 }
 
-@media only screen and (max-width: 1890px) {
+/* @media only screen and (min-width: 1281px) {
   body p {
+    font-size: 0.813rem !important;
+  }
+
+  body h1, h2 {
     font-size: 1.5rem !important;
   }
 
   body li {
-    font-size: 1.875rem !important;
+    font-size: 1rem !important;
+  }
+
+  body h3, h4 {
+    font-size: 0.875rem !important;
+  }
+} */
+
+@media only screen and (max-width: 1280px) {
+  body p {
+    font-size: 0.813rem !important;
+  }
+
+  body h1, h2 {
+    font-size: 1.5rem !important;
+  }
+
+  body li {
+    font-size: 1rem !important;
+  }
+
+  body h3, h4 {
+    font-size: 0.875rem !important;
   }
 }
 

src/pages/Contato/style.module.css

@@ -7,7 +7,7 @@
   margin: 0.75rem 0;
   font-weight: 700;
   color: var(--gray-1300);
-  font-size: 48px;
+  font-size: 3rem;
 }
 
 .dataList p {
@@ -20,13 +20,25 @@
 .formContent button[type="submit"] {
   background-color: var(--black);
   color: var(--white);
-  font-size: 32px;
+  font-size: 1rem;
+  font-weight: 400;
+  height: 52.44px;
   text-transform: uppercase;
   width: 100%;
   border-radius: 1.563rem;
   padding: 1rem;
   line-height: 32.81px;
   font-family: "Roboto";
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  transition: opacity 0.2s;
+  cursor: pointer;
+}
+
+.formContent button[type="submit"]:hover {
+  opacity: 0.9;
 }
 
 .contentInput {
@@ -38,7 +50,7 @@
 }
 
 .contentInput label{
-  font-size: 28px;
+  font-size: 1.75rem;
   color: var(--black2);
   margin-bottom: 0.75rem;
 }
@@ -89,6 +101,7 @@
   font-size: 28px;
   color: var(--black2);
   text-decoration: underline;
+  cursor: pointer;
 }
 
 .contentCheckbox label::before {
@@ -124,6 +137,41 @@
   font-size: 24px;
 }
 
+@media only screen and (max-width: 1280px) {
+  .contentInfoList h2 {
+    font-size: 1.5rem;
+  }
+
+  .contentInput label{
+    font-size: 0.875rem;
+  }
+
+  .contentInput input{
+    font-size: 0.875rem;
+    height: 46px;
+  }
+  
+  .contentInput input::placeholder {
+    font-size: 0.875rem;
+  }
+
+  .contentInput span{
+    font-size: 0.75rem;
+    top: 17px;
+    right: 22px;
+  }
+
+  .contentCheckbox label {
+    font-size: 0.875rem;
+  }
+  
+  .contentCheckbox label::before {
+    height: 1.125rem;
+    width: 1.165rem;
+    right: -26px;
+  }
+}
+
 @media only screen and (max-width: 1024px) {
   .contentInfoList {
     grid-area: contentInfo;
@@ -154,7 +202,13 @@
     top: 15px;
   }
 
-  .contentCheckbox span {
-    font-size: 0.75rem;
+  .contentCheckbox label {
+    font-size: 0.875rem;
+  }
+
+  .contentCheckbox label::before {
+    width: 1.165rem;
+    height: 1.125rem;
+    right: -26px;
   }
 }