From 7e43bedb0d9cf7f0a0cc617a509b34160b5da294 Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Mon, 30 Jan 2023 14:20:07 -0300
Subject: [PATCH] feat(product-image):main image ultrawide responsiva

---
 store/blocks/pdp/product.jsonc                |  2 +-
 styles/css/vtex.store-components.css          | 26 ++++++++++++-----
 .../pages/product/vtex.store-components.scss  | 29 ++++++++++++-------
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index e515c15..9b049b7 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/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": {
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 6582f21..402421a 100644
--- a/styles/css/vtex.store-components.css
+++ b/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%;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 4113adf..9dd1860 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/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%;
+    }
   }
 }