styles/css/vtex.store-components.css

@@ -7,6 +7,66 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
+.carouselContainer {
-  background: red;
+  display: flex;
+  flex-direction: column-reverse;
+  width: 97.064%;
+  height: 770px;
+}
+
+.carouselGaleryThumbs {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 13.554% !important;
+}
+
+.carouselGaleryCursor {
+  margin: 0;
+  width: 100%;
+  padding: 0;
+}
+
+.swiperCaret {
+  display: none;
+}
+
+.productImagesGallerySlide {
+  width: 100% !important;
+}
+
+.swiper-component {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: visible;
+  list-style: none;
+  padding: 0;
+  z-index: 1;
+}
+
+.swiper-wrapper-style {
+  column-gap: 16px;
+}
+
+.productImageTag {
+  object-fit: cover;
+}
+
+.productImageTag--main {
+  object-fit: unset !important;
+  max-height: 664px !important;
+  height: 664px;
+}
+
+.productImagesThumb {
+  margin: 16px 0 0;
+}
+
+.thumbImg,
+.thumbImg--video,
+.figure,
+.figure--video {
+  height: 100%;
+  border-radius: 8px;
 }

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

@@ -0,0 +1,65 @@
+//product-image
+
+.carouselContainer {
+  display: flex;
+  flex-direction: column-reverse;
+  width: 97.064%;
+  height: 770px;
+}
+
+.carouselGaleryThumbs {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 13.554% !important;
+}
+
+.carouselGaleryCursor {
+  margin: 0;
+  width: 100%;
+  padding: 0;
+}
+
+.swiperCaret {
+  display: none;
+}
+
+.productImagesGallerySlide {
+  width: 100% !important;
+}
+
+.swiper-component {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: visible;
+  list-style: none;
+  padding: 0;
+  z-index: 1;
+}
+
+.swiper-wrapper-style {
+  column-gap: 16px;
+}
+
+.productImageTag {
+  object-fit: cover;
+}
+
+.productImageTag--main {
+  object-fit: unset !important;
+  max-height: 664px !important;
+  height: 664px;
+}
+
+.productImagesThumb {
+  margin: 16px 0 0;
+}
+
+.thumbImg,
+.thumbImg--video,
+.figure,
+.figure--video {
+  height: 100%;
+  border-radius: 8px;
+}

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

@@ -1,3 +0,0 @@
-.newsletter{
-    background: red;
-}