feat(product-image):product-image responsivo

react/components/Html/styles.css

@@ -14,6 +14,7 @@
   gap: 10px;
   align-items: center;
   margin-bottom: 16px;
+  margin-top: 16px;
 }
 .html--pdp-productMain :global(.vtex-button){
   display: none;
@@ -24,7 +25,12 @@
   height: 49px;
   max-width: 77.354%;
 }
-
+.html--pdp-section_descriptions{
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding: 0px 40px 0px 40px;
+}
   @media screen and (min-width: 1920px){
     .html--buy-button :global(.vtex-button){
       max-width: 766px;
@@ -35,14 +41,12 @@
       padding-left: 12.5393%;
       margin: 0;
       gap: 32px;
+      max-height: 100%;
+    }
+    .html--pdp-section_descriptions{
+      padding: 0px 12.5393% 0px 12.5393%;
     }
   }
-.html--pdp-section_descriptions{
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  padding: 0px 40px 0px 40px;
-}
 .html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
   gap: 32px;
 }

store/blocks/pdp/product.jsonc

@@ -333,6 +333,7 @@
   },
   "product-images#description": {
     "props": {
+      "blockClass": "img-description",
       "maxHeight": 872,
       "testid": "product-images",
       "aspectRatio": {

styles/css/vtex.flex-layout.css

@@ -182,6 +182,11 @@
 .flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
   max-width: 100%;
 }
+@media screen and (min-width: 1920px) {
+  .flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
+    max-width: 96rem;
+  }
+}
 
 .flexRow--pdp-price .flexRowContent--pdp-price {
   justify-content: center;

styles/css/vtex.store-components.css

@@ -18,7 +18,7 @@
 }
 @media screen and (min-width: 1920px) {
   .productImagesContainer--carousel .carouselGaleryCursor {
-    max-height: 906px;
+    max-height: 100%;
   }
 }
 
@@ -167,6 +167,10 @@
   }
 }
 
+.productImageTag--img-description {
+  max-width: 872px;
+}
+
 .carouselGaleryThumbs {
   display: block;
   height: max-content;

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

@@ -173,6 +173,9 @@
 .flexRow--pdp-carrousel{
   :global(.vtex-store-components-3-x-container){
     max-width: 100%;
+    @media screen and (min-width: 1920px){
+      max-width: 96rem;
+    }
   }
 }
 .flexRow--pdp-price{

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

@@ -9,7 +9,7 @@
   }
   .carouselGaleryCursor{
     @media screen and (min-width: 1920px){
-      max-height: 906px;
+      max-height: 100%;
     }
   }
 }
@@ -152,6 +152,9 @@
     }
   }
 }
+.productImageTag--img-description{
+  max-width: 872px;
+}
 .carouselGaleryThumbs{
   display: block;
   height: max-content;