feat: Finaliza projeto e @media

react/components/Html/styles.css

@@ -179,12 +179,6 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2
   color: black;
 }
 
-[class*="vtex-store-components-3-x-productImageTag--main"] {
-  width: 904px;
-  height: 904px;
-  max-height: 900px !important;
-}
-
 [class*="pix-container"] {
   display: flex;
 }
@@ -218,6 +212,27 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2
 }
 
 
+
+@media screen and (min-width: 768px) {
   .html--botaoadc-quantidade {
     display: flex;
   }
+}
+
+
+@media screen and (max-width: 1024px){
+
+  [class*="vtex-tab-layout-0-x-listItem"]{
+    border: none;
+    width: 100%;
+    display: flex;
+  }
+
+  [class*="vtex-tab-layout-0-x-listItemActive"] {
+    border: none;
+    width: 100%;
+    display: flex;
+  }
+}
+
+

styles/css/vtex.flex-layout.css

@@ -8,13 +8,14 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+@media screen and (min-width: 768px) {
   .flexRowContent--btn-product {
-  margin: 0;
+    margin: 0 10px;
+  }
 }
 
 .flexRow--btn-product {
   width: 100%;
-  margin: 0 10px;
 }
 .flexRow--btn-product :global(.vtex-button) {
   background-color: black;

styles/css/vtex.store-components.css

@@ -198,6 +198,13 @@
   width: 50%;
   margin-left: 16px;
 }
+@media screen and (max-width: 1024px) {
+  .productDescriptionContainer {
+    width: 100%;
+    margin-left: 0;
+    margin-top: 16px;
+  }
+}
 
 .carouselGaleryThumbs {
   height: 200px;
@@ -304,3 +311,9 @@
   line-height: 25px;
   text-transform: uppercase;
 }
+
+@media screen and (max-width: 1023px) {
+  .content--imagem-descricao {
+    width: 100%;
+  }
+}

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

@@ -9,12 +9,18 @@
 // }
 
 .flexRowContent--btn-product {
-  margin: 0;
+
+
+  @media screen and (min-width: 768px) {
+    margin: 0 10px;
+  }
 }
 
 .flexRow--btn-product {
   width: 100%;
-  margin: 0 10px;
+  
+
+
 
   :global(.vtex-button) {
     background-color: black;
@@ -36,3 +42,5 @@
 .flexRowContent--container-main {
   padding: 0 40px;
 }
+
+

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

@@ -221,6 +221,12 @@
 .productDescriptionContainer {
   width: 50%;
   margin-left: 16px;
+
+  @media screen and (max-width: 1024px) {
+    width: 100%;
+    margin-left: 0;
+    margin-top: 16px;
+  }
 }
 
 .carouselGaleryThumbs {
@@ -350,3 +356,11 @@
     }
   }
 }
+
+
+
+.content--imagem-descricao {
+  @media screen and (max-width: 1023px) {
+    width: 100%;
+  }
+}

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

@@ -1,4 +1,3 @@
-
 .listContainer {
   display: flex;
   justify-content: space-evenly;
@@ -16,7 +15,20 @@
   flex-direction: row-reverse;
 
   @media screen and (max-width: 1024px) {
-    
     flex-direction: column-reverse;
   }
 }
+
+
+// .productImageTag--main {
+//   @media screen and (max-width: 1024px){
+// max-height: 1000px !important;
+// width: 100%;
+//   }
+// }
+
+// .swiper-slide {
+//   @media screen and (max-width: 1024px) {
+//     display: none;
+//   }
+// }