styles/css/vtex.flex-layout.css

@@ -22,6 +22,16 @@
     width: 100% !important;
   }
 }
+@media (max-width: 1025px) and (min-width: 768px) {
+  .stretchChildrenWidth {
+    width: 100% !important;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .stretchChildrenWidth {
+    width: 100% !important;
+  }
+}
 
 .flexCol--stack-layout-content {
   width: 100% !important;
@@ -41,7 +51,8 @@
 }
 @media (max-width: 768px) and (min-width: 375px) {
   .flexRowContent--product-main-content {
-    padding: 0 40px;
+    display: grid;
+    grid-template-columns: 100%;
   }
 }
 

styles/css/vtex.rich-text.css

@@ -20,7 +20,7 @@
 }
 @media (max-width: 768px) and (min-width: 375px) {
   .container--slider-title {
-    margin-bottom: 24px;
+    margin-bottom: 16px;
   }
 }
 .container--slider-title .wrapper--slider-title .heading--slider-title {

styles/css/vtex.slider-layout.css

@@ -10,18 +10,68 @@
 .sliderLayoutContainer--carousel {
   background: unset;
   min-height: 448.4px;
-  margin-bottom: 64px;
+  width: 94.435%;
+  margin: 0 auto 64px;
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .sliderLayoutContainer--carousel {
+    width: 92.166%;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .sliderLayoutContainer--carousel {
+    width: 78.616%;
+    margin: 0 auto 32px;
+    min-height: 273.8px;
+  }
 }
 .sliderLayoutContainer--carousel .sliderTrackContainer {
-  margin-bottom: 32px;
+  width: 96%;
+  margin: 0 auto;
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .sliderLayoutContainer--carousel .sliderTrackContainer {
+    width: 95.085%;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .sliderLayoutContainer--carousel .sliderTrackContainer {
+    width: 87.03%;
+  }
+}
+.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
+  width: 5.3515% !important;
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
+    width: 6.0831% !important;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
+    width: 6.921% !important;
+  }
+}
+.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel {
+  width: 100%;
 }
 .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) {
-  max-width: 314.4px !important;
+  max-width: 100% !important;
   border-radius: 0;
 }
 .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
   min-height: 448.4px;
 }
+@media (max-width: 1025px) and (min-width: 768px) {
+  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
+    min-height: 402.2px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
+    min-height: 273.8px;
+  }
+}
 .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) {
   padding: 0;
 }
@@ -41,9 +91,22 @@
   min-height: 50px;
 }
 .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
-  width: 314.4px;
+  width: 100%;
   height: 314.4px;
 }
+@media (max-width: 1025px) and (min-width: 768px) {
+  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
+    height: 291.2px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
+    height: 124.8px;
+  }
+}
+.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
+  border-radius: 0;
+}
 @media (max-width: 1920px) and (min-width: 1024px) {
   .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
     min-width: 100%;
@@ -82,9 +145,14 @@
   text-align: center;
   color: #000000;
 }
+.sliderLayoutContainer--carousel .sliderArrows {
+  padding: 0;
+  margin: 0;
+}
 .sliderLayoutContainer--carousel .paginationDotsContainer {
   display: flex;
   align-items: center;
+  bottom: -32px;
 }
 .sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot {
   background-color: #000000;

styles/css/vtex.store-components.css

@@ -17,6 +17,16 @@
     padding: 0 40px;
   }
 }
+@media (max-width: 1025px) and (min-width: 768px) {
+  .container {
+    padding: 0 40px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .container {
+    padding: 0 40px;
+  }
+}
 
 .swiperCaret {
   display: none;
@@ -34,6 +44,31 @@
     margin-right: 0;
   }
 }
+@media (max-width: 1025px) and (min-width: 768px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide {
+    margin: 0;
+    height: 944px !important;
+  }
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage {
+    height: 944px !important;
+  }
+}
 .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
   object-fit: unset !important;
 }
@@ -45,6 +80,7 @@
 @media (max-width: 1025px) and (min-width: 768px) {
   .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
     height: 944px !important;
+    max-height: unset !important;
   }
 }
 @media (max-width: 768px) and (min-width: 375px) {
@@ -52,6 +88,7 @@
     width: 99.67% !important;
     height: 296px !important;
     object-fit: cover !important;
+    max-height: unset !important;
   }
 }
 @media (max-width: 1920px) and (min-width: 1024px) {

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

@@ -11,6 +11,12 @@
   @media (max-width: 1920px) and (min-width: 1024px) {
     width: 100% !important;
   }
+  @media (max-width: 1025px) and (min-width: 768px) {
+    width: 100% !important;
+  }
+  @media (max-width: 768px) and (min-width: 375px) {
+    width: 100% !important;
+  }
 }
 
 .flexCol--stack-layout-content {
@@ -27,7 +33,9 @@
     grid-template-columns: 100%;
   }
   @media (max-width: 768px) and (min-width: 375px) {
-    padding: 0 40px;
+    // padding: 0 40px;
+    display: grid;
+    grid-template-columns: 100%;
   }
 }
 

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

@@ -7,6 +7,12 @@
   @media (max-width: 1920px) and (min-width: 1024px) {
     padding: 0 40px;
   }
+  @media (max-width: 1025px) and (min-width: 768px) {
+    padding: 0 40px;
+  }
+  @media (max-width: 768px) and (min-width: 375px) {
+    padding: 0 40px;
+  }
 }
 
 .swiperCaret {
@@ -25,8 +31,25 @@
           margin-left: 0;
           margin-right: 0;
         }
+        @media (max-width: 1025px) and (min-width: 768px) {
+          width: 100%;
+          margin-left: 0;
+          margin-right: 0;
+        }
+        @media (max-width: 768px) and (min-width: 375px) {
+          width: 100%;
+          margin-left: 0;
+          margin-right: 0;
+        }
         .productImagesGallerySlide {
+          @media (max-width: 1025px) and (min-width: 768px) {
+            margin: 0;
+            height: 944px !important;
+          }
           .productImage {
+            @media (max-width: 1025px) and (min-width: 768px) {
+              height: 944px !important;
+            }
             .productImageTag--main {
               object-fit: unset !important;
               @media (max-width: 1920px) and (min-width: 1024px) {
@@ -34,11 +57,13 @@
               }
               @media (max-width: 1025px) and (min-width: 768px) {
                 height: 944px !important;
+                max-height: unset !important;
               }
               @media (max-width: 768px) and (min-width: 375px) {
                 width: 99.67% !important;
                 height: 296px !important;
                 object-fit: cover !important;
+                max-height: unset !important;
               }
             }
           }
@@ -480,7 +505,7 @@
           }
         }
       }
-      .pointerEventsNone{
+      .pointerEventsNone {
         display: none;
       }
     }

styles/sass/pages/product/vtex.rich-text.scss

@@ -9,7 +9,7 @@
    margin-bottom: 24px;
   }
   @media (max-width: 768px) and (min-width: 375px) {
-    margin-bottom: 24px;
+    margin-bottom: 16px;
   }
   .wrapper--slider-title {
     .heading--slider-title {

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

@@ -3,17 +3,47 @@
 .sliderLayoutContainer--carousel {
   background: unset;
   min-height: 448.4px;
-  margin-bottom: 64px;
+  width: 94.435%;
+  margin: 0 auto 64px;
+  @media (max-width: 1025px) and (min-width: 768px) {
+    width: 92.166%;
+  }
+  @media (max-width: 768px) and (min-width: 375px) {
+    width: 78.616%;
+    margin: 0 auto 32px;
+    min-height: 273.8px;
+  }
   .sliderTrackContainer {
-    margin-bottom: 32px;
+    width: 96%;
+    margin: 0 auto;
+    @media (max-width: 1025px) and (min-width: 768px) {
+      width: 95.085%;
+    }
+    @media (max-width: 768px) and (min-width: 375px) {
+      width: 87.03%;
+    }
     .sliderTrack {
       .slide--carousel {
+        width: 5.3515% !important;
+        @media (max-width: 1025px) and (min-width: 768px) {
+          width: 6.0831% !important;
+        }
+        @media (max-width: 768px) and (min-width: 375px) {
+          width: 6.921% !important;
+        }
         .slideChildrenContainer--carousel {
+          width: 100%;
           :global(.vtex-product-summary-2-x-containerNormal) {
-            max-width: 314.4px !important;
+            max-width: 100% !important;
             border-radius: 0;
             :global(.vtex-product-summary-2-x-clearLink) {
               min-height: 448.4px;
+              @media (max-width: 1025px) and (min-width: 768px) {
+                min-height: 402.2px;
+              }
+              @media (max-width: 768px) and (min-width: 375px) {
+                min-height: 273.8px;
+              }
               :global(.vtex-product-summary-2-x-element) {
                 padding: 0;
                 :global(.vtex-product-summary-2-x-nameContainer) {
@@ -34,12 +64,18 @@
                   }
                 }
                 :global(.vtex-product-summary-2-x-imageContainer) {
-                  width: 314.4px;
+                  width: 100%;
                   height: 314.4px;
+                  @media (max-width: 1025px) and (min-width: 768px) {
+                    height: 291.2px;
+                  }
+                  @media (max-width: 768px) and (min-width: 375px) {
+                    height: 124.8px;
+                  }
                   :global(.vtex-product-summary-2-x-imageContainer) {
                     :global(.vtex-product-summary-2-x-imageNormal) {
+                      border-radius: 0;
                       @media (max-width: 1920px) and (min-width: 1024px) {
-                        // min-width: 314.4px;
                         min-width: 100%;
                       }
                     }
@@ -65,7 +101,6 @@
                       padding: 0;
                       display: flex;
                       justify-content: center;
-                      // flex-direction: column;
                       :global(.vtex-store-components-3-x-sellingPriceLabel) {
                         display: none;
                       }
@@ -86,9 +121,14 @@
       }
     }
   }
+  .sliderArrows {
+    padding: 0;
+    margin: 0;
+  }
   .paginationDotsContainer {
     display: flex;
     align-items: center;
+    bottom: -32px;
     .paginationDot {
       background-color: #000000;
       width: 10px !important;