From 9d6d696e9a739d3ee29bb067dff4d99ab2f447f2 Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Mon, 30 Jan 2023 19:51:12 -0300
Subject: [PATCH] feat(product-image):ajustando thumnails conforme o figma

finalizando product-images
---
 styles/css/vtex.breadcrumb.css                       |  5 +++++
 styles/css/vtex.store-components.css                 | 11 ++++-------
 styles/sass/pages/product/vtex.breadcrumb.scss       |  3 +++
 styles/sass/pages/product/vtex.store-components.scss |  9 ++++-----
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index af541ca..9f092fd 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -13,6 +13,11 @@
   margin-right: auto;
   max-width: 96rem;
 }
+@media screen and (max-width: 64.0625em) {
+  .container {
+    padding: 0 0 0 10.67%;
+  }
+}
 .container .term, .container .termArrow {
   display: none;
 }
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 0f9f1b4..b055542 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -69,6 +69,7 @@
   align-self: stretch;
 }
 .carouselContainer .productImage .productImageTag--main {
+  border-radius: 8px;
   max-height: 100% !important;
 }
 
@@ -83,7 +84,7 @@
 }
 @media screen and (max-width: 64.0625em) {
   .carouselGaleryThumbs .productImagesThumb {
-    width: 32% !important;
+    width: 30% !important;
   }
 }
 .carouselGaleryThumbs .productImagesThumb .figure {
@@ -93,19 +94,15 @@
   min-height: 90px;
 }
 .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
+  border-radius: 8px;
   min-height: 5.54em;
 }
 @media screen and (max-width: 64.0625em) {
   .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
-    width: 50px;
     min-height: 4.9em;
   }
 }
 .carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
+  border-radius: 8px;
   width: 90px;
-}
-@media screen and (max-width: 64.0625em) {
-  .carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
-    width: 50px;
-  }
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index aaeca14..c843639 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -3,6 +3,9 @@
     margin-left: auto;
     margin-right: auto;
     max-width: 96rem;
+    @media screen and (max-width: 64.0625em){
+      padding: 0 0 0 10.67%;
+    }
     .term,.termArrow{
       display: none;
     }
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 45a2890..38f013e 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -65,6 +65,7 @@
       margin-bottom: 1em;
       align-self: stretch;
       &-main{
+        border-radius: 8px;
         max-height: 100% !important;
       }
     }
@@ -78,25 +79,23 @@
     background:white;
     margin-right: 1em;
     @media screen and (max-width: 64.0625em){
-      width: 32% !important;
+      width: 30% !important;
     }
     .figure{
       width: 100%;
       &--video{
         min-height: 90px;
         .thumbImg{
+          border-radius: 8px;
           min-height: 5.54em;
           @media screen and (max-width: 64.0625em){
-            width: 50px;
             min-height: 4.9em;
           }
         }
       }
       .thumbImg{
+        border-radius: 8px;
         width: 90px;
-        @media screen and (max-width: 64.0625em){
-          width: 50px;
-        }
       }
     }
   }