feat: adiciona responsividade mobile

styles/css/vtex.slider-layout.css

@@ -14,6 +14,17 @@
   margin-bottom: 64px;
   padding: 0 67px;
 }
+@media only screen and (max-width: 1025px) {
+  .sliderLayoutContainer {
+    padding: 0 63px;
+  }
+}
+@media only screen and (max-width: 767px) {
+  .sliderLayoutContainer {
+    padding: 0 59px;
+    margin-bottom: 32px;
+  }
+}
 .sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderTrack--carousel) {
   gap: 16px;
 }
@@ -51,6 +62,11 @@
   content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
   padding: 0 40px 0 0;
 }
+@media only screen and (max-width: 767px) {
+  .sliderRightArrow::after {
+    padding: 0 48px 0 0;
+  }
+}
 
 .sliderLeftArrow {
   visibility: hidden;
@@ -65,3 +81,8 @@
     display: block;
   }
 }
+@media only screen and (max-width: 767px) {
+  .sliderLeftArrow::before {
+    padding: 0 0 0 48px;
+  }
+}

styles/css/vtex.store-components.css

@@ -402,7 +402,7 @@
 @media only screen and (max-width: 399px) {
   .shippingTable .shippingTableRow .shippingTableHeadDeliveryName {
     width: auto;
-    margin-right: 32px;
+    margin-right: 48px;
   }
 }
 .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate {
@@ -428,7 +428,7 @@
 @media only screen and (max-width: 399px) {
   .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice {
     width: auto;
-    margin-right: 32px;
+    margin-right: 40px;
   }
 }
 .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after {
@@ -479,12 +479,13 @@
 }
 @media only screen and (max-width: 399px) {
   .shippingTableBody .shippingTableCellDeliveryName {
-    width: 82px;
+    width: 97px;
-    margin-right: 20px;
+    margin-right: 21px;
   }
 }
 @media only screen and (max-width: 399px) {
   .shippingTableBody .shippingTableCellDeliveryPrice {
+    width: 55px;
     margin-right: 32px;
   }
 }
@@ -614,6 +615,11 @@
   background: #000000;
   color: #fff;
 }
+@media only screen and (max-width: 767px) {
+  .newsletter {
+    height: 220px;
+  }
+}
 .newsletter .container {
   display: flex;
   justify-content: center;
@@ -631,6 +637,11 @@
     max-width: 1024px;
   }
 }
+@media only screen and (max-width: 767px) {
+  .newsletter .container .form {
+    padding-bottom: 32px;
+  }
+}
 .newsletter .container .form .label {
   display: flex;
   flex-direction: column;
@@ -647,11 +658,23 @@
   line-height: 25px;
   color: #929292;
 }
+@media only screen and (max-width: 767px) {
+  .newsletter .container .form .label::after {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
 @media only screen and (max-width: 1025px) {
   .newsletter :global(.vtex-store-components-3-x-inputGroup) {
     padding: 16px 16px 0;
   }
 }
+@media only screen and (max-width: 767px) {
+  .newsletter :global(.vtex-store-components-3-x-inputGroup) {
+    display: flex;
+    padding: 0;
+  }
+}
 .newsletter .buttonContainer {
   padding: 0;
 }
@@ -665,6 +688,12 @@
   line-height: 19px;
   color: #fff;
 }
+@media only screen and (max-width: 767px) {
+  .newsletter :global(.vtex-button) {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
 .newsletter :global(.vtex-input-prefix__group) {
   border: none;
   border-radius: 0;
@@ -678,3 +707,9 @@
   line-height: 25px;
   color: #929292;
 }
+@media only screen and (max-width: 767px) {
+  .newsletter :global(.vtex-styleguide-9-x-input) {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}

styles/css/vtex.tab-layout.css

@@ -24,10 +24,9 @@
   padding: 16px 0 32px 0;
   color: #575757;
 }
-@media only screen and (max-width: 1025px) {
+@media only screen and (max-width: 767px) {
   .container--structure::after {
     font-size: 20px;
-    line-height: 32px;
   }
 }
 .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {

styles/sass/pages/product/vtex.slider-layout.scss

@@ -2,6 +2,15 @@
   margin-bottom: 64px;
   padding: 0 67px;
 
+  @include mq(md, max) {
+    padding: 0 63px;
+  }
+
+  @include mq(sm, max) {
+    padding: 0 59px;
+    margin-bottom: 32px;
+  }
+
   :global(.vtex-slider-layout-0-x-sliderTrack--carousel) {
     gap: 16px;
   }
@@ -40,6 +49,10 @@
     visibility: visible;
     content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png);
     padding: 0 40px 0 0;
+
+    @include mq(sm, max) {
+      padding: 0 48px 0 0;
+    }
   }
 }
 
@@ -54,5 +67,9 @@ visibility: hidden;
   @include mq(md, max) {
     display: block;
   }
+
+  @include mq(sm, max) {
+    padding: 0 0 0 48px;
+  }
   }
 }

styles/sass/pages/product/vtex.store-components.scss

@@ -461,7 +461,7 @@
 
       @include mq(xs, max) {
         width: auto;
-        margin-right: 32px;
+        margin-right: 48px;
       }
     }
 
@@ -490,7 +490,7 @@
 
       @include mq(xs, max) {
         width: auto;
-        margin-right: 32px;
+        margin-right: 40px;
       }
 
       &::after {
@@ -555,13 +555,14 @@
 
   .shippingTableCellDeliveryName {
     @include mq(xs, max) {
-      width: 82px;
+      width: 97px;
-      margin-right: 20px;
+      margin-right: 21px;
     }
   }
 
   .shippingTableCellDeliveryPrice {
     @include mq(xs, max) {
+      width: 55px;
       margin-right: 32px;
     }
   }
@@ -733,6 +734,10 @@
   background: $black;
   color: $white;
 
+  @include mq(sm, max) {
+    height: 220px;
+  }
+
   .container {
     display: flex;
     justify-content: center;
@@ -751,6 +756,10 @@
         max-width: 1024px;
       }
 
+      @include mq(sm, max) {
+        padding-bottom: 32px;
+      }
+
       .label {
         display: flex;
         flex-direction: column;
@@ -768,6 +777,11 @@
           line-height: 25px;
 
           color: $gray;
+
+          @include mq(sm, max) {
+            font-size: 16px;
+            line-height: 22px;
+          }
         }
       }
     }
@@ -777,6 +791,11 @@
     @include mq(md, max) {
       padding: 16px 16px 0;
     }
+
+    @include mq(sm, max) {
+      display: flex;
+      padding: 0;
+    }
   }
 
   .buttonContainer {
@@ -793,6 +812,11 @@
     line-height: 19px;
 
     color: $white;
+
+    @include mq(sm, max) {
+      font-size: 14px;
+      line-height: 19px;
+    }
   }
 
   :global(.vtex-input-prefix__group) {
@@ -809,5 +833,10 @@
     line-height: 25px;
 
     color: $gray;
+
+    @include mq(sm, max) {
+      font-size: 12px;
+      line-height: 16px;
+    }
   }
 }

styles/sass/pages/product/vtex.tab-layout.scss

@@ -12,9 +12,8 @@
 
     color: $gray-100;
 
-    @include mq(md, max) {
+    @include mq(sm, max) {
       font-size: 20px;
-      line-height: 32px;
     }
   }