estilização do mobile slid de produtos indicados

styles/css/vtex.flex-layout.css

@@ -69,4 +69,13 @@
   .flexRowContent--indisponivel .stretchChildrenWidth {
     width: 100% !important;
   }
+  .flexRowContent--indisponivel :global(.vtex-store-components-3-x-content) {
+    width: 100%;
+    max-width: 100%;
+    justify-content: initial;
+    gap: 10px;
+  }
+  .flexRowContent--indisponivel .inputName {
+    margin-bottom: 0;
+  }
 }

styles/css/vtex.slider-layout.css

@@ -30,8 +30,18 @@
   padding: 0 40px 0 40px;
 }
 .sliderLayoutContainer--carousel .sliderLeftArrow--carousel {
-  margin-left: 12px;
+  visibility: hidden;
+}
+.sliderLayoutContainer--carousel .sliderLeftArrow--carousel::before {
+  visibility: visible;
+  content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-left-ueber.png");
+  margin-left: 40px;
 }
 .sliderLayoutContainer--carousel .sliderRightArrow--carousel {
-  margin-right: 12px;
+  visibility: hidden;
+}
+.sliderLayoutContainer--carousel .sliderRightArrow--carousel::after {
+  visibility: visible;
+  content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-right-ueber.png");
+  margin-right: 40px;
 }

styles/css/vtex.store-components.css

@@ -50,6 +50,11 @@
     justify-content: flex-start;
   }
 }
+@media only screen and (max-width: 375px) {
+  .container .carouselGaleryThumbs {
+    display: block;
+  }
+}
 
 .skuSelectorContainer {
   display: flex;
@@ -282,9 +287,19 @@
 .subscriberContainer .form .content .inputName {
   grid-area: nome;
 }
+@media only screen and (max-width: 1024px) {
+  .subscriberContainer .form .content .inputName {
+    margin-bottom: 0;
+  }
+}
 .subscriberContainer .form .content .inputEmail {
   grid-area: email;
 }
+@media only screen and (max-width: 1024px) {
+  .subscriberContainer .form .content .inputEmail {
+    margin-bottom: 0;
+  }
+}
 .subscriberContainer .form .content .submit {
   grid-area: submit;
   width: 100%;

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

@@ -66,6 +66,16 @@ margin-left: 10px;
     width: 100% !important;
 
    }
+   :global(.vtex-store-components-3-x-content){
+    width: 100%;
+    max-width: 100%;
+    justify-content: initial;
+    gap: 10px;
+   }
+
+   .inputName{
+    margin-bottom: 0;
+   }
 }
 }
 

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

@@ -22,11 +22,21 @@
   margin-bottom: 64px;
   padding: 0 40px 0 40px;
   .sliderLeftArrow--carousel{
-    margin-left: 12px;
+    visibility: hidden;
+    &::before{
+      visibility: visible;
+      content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-left-ueber.png");
+      margin-left: 40px;
+    }
   }
 
   .sliderRightArrow--carousel{
-    margin-right: 12px;}
+    visibility: hidden;
+    &::after{
+      visibility: visible;
+      content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-right-ueber.png");
+      margin-right: 40px;
+    }
 
 }
-
+}

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

@@ -46,10 +46,17 @@ gap: 16px;
   @include mq (md, max) {
     .productNameContainer {
       justify-content: flex-start;
+
+
     }
 
 
 
+  }
+  @include mq (sm, max) {
+    .carouselGaleryThumbs{
+display: block;
+    }
   }
 }
 
@@ -412,10 +419,17 @@ padding-bottom: 15px;
 
       .inputName {
         grid-area: nome;
+        @include mq (md, max) {
+          margin-bottom: 0;
+        }
+
       }
 
       .inputEmail {
         grid-area: email;
+        @include mq (md, max) {
+          margin-bottom: 0;
+        }
       }
 
       .submit {

styles/sass/utils/_vars.scss

@@ -22,7 +22,7 @@ $color-green: #4caf50;
 $grid-breakpoints: (
 	xs: 0,
 	cstm: 400,
-	sm: 768px,
+	sm: 376px,
 	md: 1025px,
 	lg: 1920px,
 	xl: 1921px