feat(product-image):main image ultrawide responsiva

store/blocks/pdp/product.jsonc

@@ -44,7 +44,7 @@
       "paddingTop": 7,
       "paddingBottom": 7
     },
-    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
+    "children": ["flex-layout.col#stack"]
   },
 
   "stack-layout": {

styles/css/vtex.store-components.css

@@ -42,18 +42,28 @@
 .carouselContainer {
   padding: 0 40px 0;
 }
-.carouselContainer .productImageTag {
+.carouselContainer .productImage {
+  max-width: 85.238%;
+}
+@media screen and (min-width: 156.25em) {
+  .carouselContainer .productImage {
+    min-width: 904px;
+    max-width: 100%;
+  }
+}
+.carouselContainer .productImage .productImageTag- {
   max-height: 100% !important;
+  margin-bottom: 1em;
   align-self: stretch;
-  margin-bottom: 16px;
 }
-.carouselContainer .productImagesThumb {
-  background: white;
-}
-.carouselContainer .productImagesThumb .figure {
-  width: 100%;
+.carouselContainer .productImage .productImageTag--main {
+  max-height: 100% !important;
 }
 
 .carouselGaleryThumbs .productImagesThumb {
-  margin-right: 16px;
+  background: white;
+  margin-right: 1em;
+}
+.carouselGaleryThumbs .productImagesThumb .figure {
+  width: 100%;
 }

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

@@ -46,22 +46,29 @@
 
 .carouselContainer{
   padding: 0 40px 0;
-
-  .productImageTag{
-    max-height: 100% !important;
-    align-self: stretch;
-    margin-bottom: 16px;
-  }
-  .productImagesThumb{
-    background:white;
-    .figure{
-      width: 100%;
+  .productImage{
+    max-width:85.238%;
+    @media screen and (min-width: 156.25em){
+      min-width: 904px;
+      max-width:100%;
+    }
+    .productImageTag-{
+      max-height: 100% !important;
+      margin-bottom: 1em;
+      align-self: stretch;
+      &-main{
+        max-height: 100% !important;
+      }
     }
   }
 }
 .carouselGaleryThumbs{
   .productImagesThumb{
-    margin-right: 16px;
+    background:white;
+    margin-right: 1em;
+    .figure{
+      width: 100%;
+    }
   }
 }