feat: faz adaptações para telas mobile, tablet e ultrawide

react/components/Html/styles.css

@@ -10,6 +10,27 @@
   grid-template-columns: 48.8% 51.2%;
   padding-bottom: 16px;
 }
+@media screen and (min-width: 1920px) {
+  [class*="html--product-main"],
+  [class*="html--product-availability"] {
+    width: 71.2%;
+    grid-template-columns: 50.5% 49.5%;
+  }
+}
+@media screen and (max-width: 1024px) {
+  [class*="html--product-main"],
+  [class*="html--product-availability"] {
+    display: flex;
+    flex-direction: column;
+    width: 92.1875%;
+  }
+}
+@media screen and (max-width: 768px) {
+  [class*="html--product-main"],
+  [class*="html--product-availability"] {
+    width: 79%;
+  }
+}
 
 [class*="html--stack"] {
   grid-area: 1/1;
@@ -20,9 +41,10 @@
   grid-area: 1/2;
   margin-left: 32px;
 }
-
+@media screen and (max-width: 1024px) {
-[class*="html--right-col"] .vtex-store-components-3-x-container {
+  [class*="html--right-col"] {
-  padding: 0;
+    margin-left: 0;
+  }
 }
 
 [class*="html--buy-button"] {
@@ -40,6 +62,12 @@
   display: block !important;
 }
 
+@media screen and (max-width: 768px) {
+  [class*="html--add-to-cart-button"] button {
+    height: 74px !important;
+  }
+}
+
 [class*="html--product-quantity-cart-button"] {
   display: flex;
   flex-direction: row;
@@ -50,6 +78,12 @@
   height: 49px;
 }
 
+@media screen and (max-width: 768px){
+  [class*="html--product-quantity-cart-button"] {
+    flex-direction: column;
+  }
+}
+
 [class*="html--product-quantity-cart-button"] input{
   height: 49px;
   width: 32px;
@@ -73,18 +107,35 @@
   display: block !important;
 }
 
+@media screen and (max-width: 768px) {
+  [class*="html--shipping-simulator"] {
+    padding-top: 81px;
+  }
+}
+
 [class*="html--shipping-simulator"] button {
   background-color: #000000;
   border-radius: 0;
   border: none;
   width: 49px;
-  height: 49px;
+  height: 49px !important;
 
   position: absolute;
-  left: 228px;
   display: block !important;
 }
 
+@media screen and (min-width: 769px) {
+  [class*="html--shipping-simulator"] button {
+    left: 228px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  [class*="html--shipping-simulator"] button {
+    right: 0;
+  }
+}
+
 [class*="html--shipping-simulator"] a {
   color: #000000;
 }
@@ -112,3 +163,8 @@
   margin-top: 8px;
   margin-bottom: 16px;
 }
+
+[class*="html--description"] {
+  position: relative;
+  top: 9px;
+}

styles/css/vtex.add-to-cart-button.css

@@ -13,3 +13,8 @@
   line-height: 25px !important;
   color: #FFFFFF !important;
 }
+@media screen and (max-width: 768px) {
+  .buttonText {
+    width: 168px;
+  }
+}

styles/css/vtex.breadcrumb.css

@@ -12,6 +12,21 @@
   margin: 0 auto;
   padding: 0 0 16px 0;
 }
+@media screen and (min-width: 1920px) {
+  .container {
+    width: 71.2%;
+  }
+}
+@media screen and ((min-width: 769) and (max-width: 1024px)) {
+  .container {
+    width: 92.1875%;
+  }
+}
+@media screen and (max-width: 768px) {
+  .container {
+    width: 79%;
+  }
+}
 .container .homeIcon {
   display: none;
 }

styles/css/vtex.product-identifier.css

@@ -25,3 +25,8 @@
   margin-top: 8px;
   margin-bottom: 24px;
 }
+@media screen and (max-width: 1024px) {
+  .product-identifier {
+    justify-content: left;
+  }
+}

styles/css/vtex.store-components.css

@@ -12,6 +12,11 @@
   background: red;
 }
 
+.container {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .thumbImg,
 .figure,
 .carouselThumbBorder {
@@ -28,6 +33,11 @@
 .carouselGaleryThumbs {
   margin: 0 !important;
 }
+@media screen and (max-width: 639px) {
+  .carouselGaleryThumbs {
+    display: inline-flex;
+  }
+}
 
 .productImageTag,
 .productImageTag--main {
@@ -47,6 +57,12 @@
 .productNameContainer--quickview {
   text-align: right;
 }
+@media screen and (max-width: 1024px) {
+  .productNameContainer--quickview {
+    text-align: left;
+    padding-top: 32px;
+  }
+}
 
 /*
 .productDescriptionTitle {
@@ -227,6 +243,11 @@
   align-items: center;
   padding: 0;
 }
+@media screen and (max-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) {
+    width: 79vw;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
   font-weight: 400;
   font-size: 12px;
@@ -237,11 +258,24 @@
   top: 43px;
   left: 312px;
 }
+@media screen and (max-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    top: 85px;
+    width: 79vw;
+    left: 0;
+    text-align: right;
+  }
+}
 .shippingContainer :global(.vtex-input-prefix__group) {
   height: 49px;
   width: 231px;
   border-radius: 0;
 }
+@media screen and (max-width: 768px) {
+  .shippingContainer :global(.vtex-input-prefix__group) {
+    width: 79vw;
+  }
+}
 .shippingContainer :global(.vtex-input__error) {
   position: absolute;
   margin: 2px;

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -3,4 +3,8 @@
   font-size: 18px !important;
   line-height: 25px !important;
   color: #FFFFFF !important;
+
+  @media screen and (max-width: 768px){
+    width: 168px;
+  }
 }

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -3,6 +3,16 @@
   margin: 0 auto;
   padding: 0 0 16px 0;
 
+  @media screen and (min-width: 1920px) {
+    width: 71.2%;
+  }
+  @media screen and ((min-width: 769) and (max-width: 1024px)) {
+    width: 92.1875%;
+  }
+  @media screen and (max-width: 768px) {
+    width: 79%;
+  }
+
   .homeIcon {
     display: none;
   }

styles/sass/pages/product/vtex.product-identifier.scss

@@ -15,4 +15,8 @@
   justify-content: right;
   margin-top: 8px;
   margin-bottom: 24px;
+
+  @media screen and (max-width: 1024px) {
+    justify-content: left;
+  }
 }

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

@@ -2,6 +2,11 @@
   background: red;
 }
 
+.container {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .thumbImg,
 .figure,
 .carouselThumbBorder {
@@ -17,6 +22,10 @@
 
 .carouselGaleryThumbs {
   margin: 0 !important;
+
+  @media screen and (max-width: 639px) {
+    display: inline-flex;
+  }
 }
 
 .productImageTag,
@@ -36,7 +45,13 @@
 
 .productNameContainer--quickview{
   text-align: right;
+
+  @media screen and (max-width: 1024px) {
+    text-align: left;
+    padding-top: 32px;
+  }
 }
+
 /*
 .productDescriptionTitle {
   font-weight: 400;
@@ -236,6 +251,10 @@
     display: flex;
     align-items: center;
     padding: 0;
+
+    @media screen and (max-width: 768px) {
+      width: 79vw;
+    }
   }
 
   :global(.vtex-address-form__postalCode-forgottenURL) {
@@ -248,12 +267,23 @@
     position: absolute;
     top: 43px;
     left: 312px;
+
+    @media screen and (max-width: 768px) {
+      top: 85px;
+      width: 79vw;
+      left: 0;
+      text-align: right;
+    }
   }
 
   :global(.vtex-input-prefix__group ) {
     height: 49px;
     width: 231px;
     border-radius: 0;
+
+    @media screen and (max-width: 768px) {
+      width: 79vw;
+    }
   }
 
   :global(.vtex-input__error) {