From 5d3dce5615abd2b2727b86661dab9039a8ebadcb Mon Sep 17 00:00:00 2001
From: PatrickSouza <patrick.pss@gmail.com>
Date: Fri, 10 Feb 2023 12:52:58 -0300
Subject: [PATCH] feat: criando o comecando a estilizar o @media

---
 .../product-summary-list.jsonc                | 30 +++++--------------
 styles/css/vtex.breadcrumb.css                |  5 ++++
 styles/css/vtex.flex-layout.css               | 11 +++++++
 styles/css/vtex.tab-layout.css                |  7 ++++-
 .../sass/pages/product/vtex.breadcrumb.scss   |  4 +++
 .../sass/pages/product/vtex.flex-layout.scss  |  9 ++++++
 .../sass/pages/product/vtex.tab-layout.scss   |  6 +++-
 7 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc
index cfc3226..971cd70 100644
--- a/store/blocks/product-summary/product-summary-list.jsonc
+++ b/store/blocks/product-summary/product-summary-list.jsonc
@@ -9,14 +9,10 @@
     ]
   },
   "responsive-layout.desktop#productSummaryList": {
-    "children": [
-      "flex-layout.row#summaryListDesktop"
-    ]
+    "children": ["flex-layout.row#summaryListDesktop"]
   },
   "responsive-layout.mobile#productSummaryList": {
-    "children": [
-      "flex-layout.row#summaryListMobile"
-    ]
+    "children": ["flex-layout.row#summaryListMobile"]
   },
   "product-price-savings#summaryPercentage": {
     "props": {
@@ -36,7 +32,7 @@
     ]
   },
   "flex-layout.row#summaryListDesktop": {
-    "props":{
+    "props": {
       "fullWidth": true,
       "colSizing": "auto",
       "blockClass": "summaryListDesktop"
@@ -69,9 +65,7 @@
     ]
   },
   "flex-layout.row#productSpecifications": {
-    "children": [
-      "product-specification-group#summary"
-    ]
+    "children": ["product-specification-group#summary"]
   },
   "product-summary-name#summaryListDesktop": {
     "props": {
@@ -100,18 +94,13 @@
       "colSizing": "auto",
       "colGap": 5
     },
-    "children": [
-      "add-to-cart-button",
-      "flex-layout.row#buyNowButton"
-    ]
+    "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
   },
   "flex-layout.row#buyNowButton": {
     "props": {
       "blockClass": "buyNowButton"
     },
-    "children": [
-      "add-to-cart-button#buyNow"
-    ]
+    "children": ["add-to-cart-button#buyNow"]
   },
 
   "add-to-cart-button#buyNow": {
@@ -123,10 +112,7 @@
     }
   },
   "flex-layout.col#priceSummaryListDesktop": {
-    "children": [
-      "product-selling-price#summary",
-      "product-list-price#summary"
-    ]
+    "children": ["product-selling-price#summary", "product-list-price#summary"]
   },
   "stack-layout#summaryListDesktop": {
     "children": [
@@ -144,7 +130,7 @@
     }
   },
   "flex-layout.row#summaryListMobile": {
-    "props":{
+    "props": {
       "preserveLayoutOnMobile": true,
       "colSizing": "auto",
       "blockClass": "summaryListMobile",
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 426b1af..b5e72be 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -11,6 +11,11 @@
   max-width: 1920px;
   margin: 0 auto;
 }
+@media (max-width: 1440px) {
+  .container {
+    padding: 0 40px;
+  }
+}
 .container .link,
 .container .term {
   font-family: "Open Sans", sans-serif;
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 5ed5767..d902c63 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -7,10 +7,21 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+@media (max-width: 1440px) {
+  .flexRow--product-main-container {
+    padding: 0 40px;
+  }
+}
 .flexRow--product-main-container :global(.vtex-store-components-3-x-container) {
   max-width: 1920px;
 }
 
+@media (max-width: 1440px) {
+  .flexRowContent {
+    padding: 0 72px;
+  }
+}
+
 .flexRowContent--button-card-add .stretchChildrenWidth:first-child {
   max-width: 128px;
   padding-right: 10px;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 1b28ce3..785341e 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -8,7 +8,12 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  padding: 0 320px !important;
+  padding: 0 320px;
+}
+@media (max-width: 1440px) {
+  .container {
+    padding: 0 40px;
+  }
 }
 
 .listContainer {
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 47cbe5d..8cc518c 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -2,6 +2,10 @@
   max-width: 1920px;
   margin: 0 auto;
 
+  @media (max-width: 1440px) {
+    padding: 0 40px;
+  }
+
   .link,
   .term {
     font-family: "Open Sans", sans-serif;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index c015e42..86b9baf 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,8 +1,17 @@
 .flexRow--product-main-container {
+  @media (max-width: 1440px) {
+    padding: 0 40px;
+  }
+
   :global(.vtex-store-components-3-x-container) {
     max-width: 1920px;
   }
 }
+.flexRowContent {
+  @media (max-width: 1440px) {
+    padding: 0 72px;
+  }
+}
 
 .flexRowContent--button-card-add {
   .stretchChildrenWidth {
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index cc77106..3fa2263 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,5 +1,9 @@
 .container {
-  padding: 0 320px !important;
+  padding: 0 320px;
+
+  @media (max-width: 1440px) {
+    padding: 0 40px;
+  }
 }
 .listContainer {
   display: flex;