styles/css/vtex.flex-layout.css

@@ -1,98 +1,34 @@
-.flexRowContent--menu-link,
-.flexRowContent--main-header {
-  padding: 0 0.5rem;
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.flexRowContent {
+  padding: 0;
+  margin: 0;
+  column-gap: 32px;
 }
 
-@media screen and (min-width: 40em) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 1rem;
+.stretchChildrenWidth {
+  padding: 0;
+}
+@media (max-width: 1920px) and (min-width: 1024px) {
+  .stretchChildrenWidth {
+    width: 100% !important;
   }
 }
 
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
+.flexCol--stack-layout-content {
+  width: 100% !important;
+}
+
+@media (max-width: 1920px) and (min-width: 1024px) {
+  .flexRowContent--product-main-content {
+    display: grid;
+    grid-template-columns: 48.819% 48.819%;
   }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
-  display: flex;
-  max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
-}
+}

styles/css/vtex.store-components.css

@@ -7,6 +7,17 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.container {
+  width: 100%;
+  padding: 0;
+  margin: auto;
+}
+@media (max-width: 1920px) and (min-width: 1024px) {
+  .container {
+    padding: 0 40px;
+  }
+}
+
 .carouselGaleryThumbs {
   margin-top: 16px;
 }
@@ -25,8 +36,8 @@
 }
 
 .carouselGaleryCursor {
-  margin: 0;
-  width: 100%;
+  margin: 0 !important;
+  width: auto;
   padding: 0;
 }
 
@@ -34,9 +45,27 @@
   display: none;
 }
 
+@media (max-width: 1920px) and (min-width: 1024px) {
+  .productImagesGallerySwiperContainer {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
 .productImageTag--main {
-  width: 664px;
   object-fit: unset !important;
-  max-height: 664px !important;
-  height: 664px;
+}
+@media (max-width: 1920px) and (min-width: 1024px) {
+  .productImageTag--main {
+    max-height: 664px !important;
+    height: 664px !important;
+  }
+}
+
+@media (max-width: 1920px) and (min-width: 1024px) {
+  .productVideo,
+  .videoContainer {
+    height: 664px;
+  }
 }

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

@@ -0,0 +1,23 @@
+.flexRowContent {
+  padding: 0;
+  margin: 0;
+  column-gap: 32px;
+}
+
+.stretchChildrenWidth {
+  padding: 0;
+  @media (max-width: 1920px) and (min-width: 1024px) {
+    width: 100% !important;
+  }
+}
+
+.flexCol--stack-layout-content {
+  width: 100% !important;
+}
+
+.flexRowContent--product-main-content {
+  @media (max-width: 1920px) and (min-width: 1024px) {
+    display: grid;
+    grid-template-columns: 48.819% 48.819%;
+  }
+}

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

@@ -1,5 +1,14 @@
 //product-image
 
+.container {
+  width: 100%;
+  padding: 0;
+  margin: auto;
+  @media (max-width: 1920px) and (min-width: 1024px) {
+   padding: 0 40px;
+  }
+}
+
 .carouselGaleryThumbs {
   margin-top: 16px;
   .productImagesThumb {
@@ -17,9 +26,11 @@
     }
   }
 }
+
+
 .carouselGaleryCursor {
-  margin: 0;
-  width: 100%;
+  margin: 0 !important;
+  width: auto;
   padding: 0;
 }
 
@@ -27,9 +38,25 @@
   display: none;
 }
 
-.productImageTag--main {
-  width: 664px;
-  object-fit: unset !important;
-  max-height: 664px !important;
-  height: 664px;
+.productImagesGallerySwiperContainer {
+  @media (max-width: 1920px) and (min-width: 1024px) {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
+.productImageTag--main {
+  object-fit: unset !important;
+  @media (max-width: 1920px) and (min-width: 1024px) {
+    max-height: 664px !important;
+    height: 664px !important;
+  }
+}
+
+.productVideo,
+.videoContainer {
+  @media (max-width: 1920px) and (min-width: 1024px) {
+    height: 664px;
+  }
+}
+