diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index bb1054e..bdfabff 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,16 +1,26 @@ [class*="html--quantity-button-buy"] { display: flex; gap: 10px; +} +[class*="html--size-buy-button"] { + width: 100%; } -@media (max-width: 768px) { + +[class*="html--size-quantity-button"] { + width: 128px; + +} + +@media (max-width: 425px) { [class*="html--quantity-button-buy"] { flex-direction: column; } + } diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..7289eb5 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -3,7 +3,8 @@ "props": { "position": "bottom" }, - "children": ["flex-layout.row#buy-button"] + "children": [ + "flex-layout.row#buy-button"] }, "product-assembly-options": { "children": [ diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index bea3bec..7189b77 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,8 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#Descricao", + // "tab-layout#Descricao" + "html#tab-layout", "rich-text#slide", "list-context.product-list#demo1", "product-questions-and-answers" @@ -122,6 +123,11 @@ }, "children": ["product-images#imageDescription", "product-description"] }, + "product-description":{ + "props":{ + "collapseContent": false + } + }, "flex-layout.row#wrapperImageDescription": { "props": { @@ -150,14 +156,24 @@ "list-context.product-list#demo1": { "blocks": ["product-summary.shelf#demo1"], - "children": ["slider-layout#carousel"] + "children": [ "html#slider-layout#carousel"] }, +"html#product-summary":{ + "props": { +"testId": "vtex-product-summary" + }, +"children": [ + "product-summary-image", + "product-summary-name", + "product-list-price", + "product-selling-price" +] +}, + "product-summary.shelf#demo1": { "children": [ - "product-summary-image", - "product-summary-name", - "product-summary-price" + "html#product-summary" ] }, @@ -231,7 +247,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#product-image", "product-bookmark", "product-specification-badges" ] @@ -253,7 +269,10 @@ "rowGap": 0 } }, - "flex-layout.row#product-image": { + "html#product-image": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, "product-images": { @@ -276,34 +295,41 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + // "flex-layout.row#product-name" + "html#product-name", + // "product-identifier.product" + "html#product-identifier.product", "product-rating-summary", - "flex-layout.row#selling-price", - "product-installments#m3", - "Pix", - "sku-selector", + // "flex-layout.row#selling-price" + "html#product-selling-price", + "html#product-installments#m3", + // "product-installments#m3", + // "Pix" + "html#pix", + // "sku-selector" + "html#sku-selector", // "product-quantity", "html#quantity-button-buy", "product-gifts", // "flex-layout.row#buy-button", - "availability-subscriber", - "shipping-simulator" + "availability-subscriber","html#shipping-simulator" + // "shipping-simulator" ] }, "html#quantity-button-buy":{ "props": { "blockClass": "quantity-button-buy" - }, "children": [ - "product-quantity#size", - "flex-layout.row#buy-button" + "html#product-quantity#size", + "html#buy-button" ] }, + "product-quantity#size": { "props": { + "size": "large", "showLabel": false } @@ -323,10 +349,9 @@ } }, - "flex-layout.row#buy-button": { + +"flex-layout.row#buy-button": { "props": { - "marginTop": 4, - "marginBottom": 7, "blockClass": "size-buy-button" }, "children": ["add-to-cart-button"] @@ -354,8 +379,9 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" + ] }, @@ -372,16 +398,145 @@ "blockClass": "message-availability" }, "children": ["availability-subscriber"] + }, + + "html#product-installments#m3":{ + "props": { + "testId": "product-installments" + }, + + "children": [ + "product-installments#m3" + ] + + }, + + "html#pix":{ + "props": { + "testId": "pix-price" + }, + + "children": [ + "Pix" + + ] + + }, + + + + "html#product-selling-price":{ + "props": { + "testId": "product-price" + }, + + "children": [ + "product-selling-price" + + ] + + }, + + "html#buy-button":{ + "props": { + "blockClass": "size-buy-button", + "testId": "add-to-cart-button" + }, + + "children": [ + "flex-layout.row#buy-button" + + ] + + }, + "html#product-quantity#size":{ + "props": { + "testId":"product-quantity", + "blockClass": "size-quantity-button" + + }, + + "children": [ + "product-quantity#size" + + ] + + }, + "html#product-name":{ + "props": { + "testId":"product-name" + + }, + + "children": [ + "flex-layout.row#product-name" + + ] + + }, + "html#product-identifier.product":{ + "props": { + "testId":"product-code" + + }, + + "children": [ + "product-identifier.product" + + ] + + }, + "html#sku-selector":{ + "props": { + "testId":"sku-selector" + + }, + + "children": [ + "sku-selector" + + ] + + }, + "html#shipping-simulator":{ + "props": { + "testId":"shipping-simulator" + + }, + + "children": [ + "shipping-simulator" + + ] + + }, + "html#tab-layout":{ + "props": { + "testId":"product-description" + + }, + + "children": [ + "tab-layout#Descricao" + + ] + + }, + "html#slider-layout#carousel":{ + "props": { + "testId":"product-summary-list" + + }, + + "children": [ + "slider-layout#carousel" + + ] + } - // "share#default": { - // "props": { - // "social": { - // "Facebook": true, - // "WhatsApp": true, - // "Twitter": false, - // "Pinterest": true - // } - // } - // } + + + + } diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..6805bf7 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -9,6 +9,8 @@ "flex-layout.row#selling-price-savings", "product-installments#summary", "add-to-cart-button" + + ] }, "flex-layout.col#productRating": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 07cc5ea..28f9a94 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -33,9 +33,10 @@ margin: 0; margin-left: 10px; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 425px) { .flexRow--size-buy-button { - margin: 0 0 16px 0; + margin-left: 0; + margin-bottom: 16px; } .flexRow--size-buy-button .stretchChildrenWidth { height: 74px; @@ -81,4 +82,17 @@ .flexRowContent--indisponivel .inputName { margin-bottom: 0; } +} + +.flexRowContent--description { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +@media only screen and (max-width: 1024px) { + .flexRowContent--description { + margin-bottom: 0px; + } +} + +.html--size-buy-button { + width: 100%; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 2d18b5c..d17b1d0 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -9,6 +9,8 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); /* Grid breakpoints */ .product-identifier__value { + font-family: "Open Sans", sans-serif; + font-weight: 400; font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.4784313725); diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index d9acf67..1eb60b3 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -19,4 +19,8 @@ .installmentsNumber, .installmentValue { font-weight: 700; +} + +.listPrice { + display: block; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index a987d99..cc44170 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -17,10 +17,10 @@ } .quantitySelectorContainer { - width: 128px; + width: 100%; height: 49px; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 769px) { .quantitySelectorContainer { margin-bottom: 0; } diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 017db0e..9faee49 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -14,8 +14,4 @@ .slideChildrenContainer .sliderTrackContainer .sliderLeftArrow, .slideChildrenContainer .sliderTrackContainer .sliderRightArrow { margin-bottom: 40px; -} - -.imageContainer { - height: 287px; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index e10f68f..286e0e3 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -35,7 +35,6 @@ .sliderLayoutContainer--carousel .sliderLeftArrow--carousel::before { visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-left-ueber.png"); - margin-left: 40px; } .sliderLayoutContainer--carousel .sliderRightArrow--carousel { visibility: hidden; @@ -43,5 +42,4 @@ .sliderLayoutContainer--carousel .sliderRightArrow--carousel::after { visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-right-ueber.png"); - margin-right: 40px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index da62c8b..f66c706 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -27,9 +27,11 @@ max-width: 100% !important; } .container .productNameContainer { + font-family: "Open Sans", sans-serif; + font-weight: 300; font-size: 20px; line-height: 34px; - color: #575757; + color: #868686; display: flex; justify-content: flex-end; } @@ -64,10 +66,13 @@ margin-left: 16px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { + font-family: "Open Sans", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19px; visibility: visible; display: block; content: "OUTRAS CORES:"; - font-size: 14px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue, .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator { @@ -85,10 +90,13 @@ margin-left: 16px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + font-family: "Open Sans", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19px; visibility: visible; display: block; content: "OUTROS TAMANHOS:"; - font-size: 14px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { width: 40px; @@ -134,6 +142,26 @@ display: flex; padding: 0; } +@media only screen and (max-width: 425px) { + .shippingContainer { + display: block; + } + .shippingContainer :global(.vtex-address-form__postalCode) { + flex-direction: column; + } + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: 0 !important; + margin-top: 0 !important; + display: flex; + justify-content: flex-end; + } + .shippingContainer :global(.vtex-button) { + right: 0 !important; + margin-top: 0 !important; + left: 86%; + bottom: 78px; + } +} .shippingContainer :global(.vtex-input-prefix__group) { height: 49px; } @@ -188,7 +216,7 @@ margin-bottom: 16px; } } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 769px) { .shippingContainer { padding-top: 16px; } @@ -321,33 +349,46 @@ font-family: "Open Sans", sans-serif; } -.productDescriptionTitle { +@media only screen and (max-width: 1024px) { + .productDescriptionContainer { + margin-bottom: 16px; + } +} +.productDescriptionContainer .productDescriptionTitle { font-size: 24px; line-height: 32px; font-family: "Open Sans", sans-serif; padding-left: 32px; + color: #868686; + font-weight: 400; } @media only screen and (max-width: 1024px) { - .productDescriptionTitle { + .productDescriptionContainer .productDescriptionTitle { padding-left: 0; padding-top: 16px; } } - -.productDescriptionText { - font-size: 0; +@media only screen and (min-width: 1921px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 32px; + } } -.productDescriptionText::after { - position: absolute; +.productDescriptionContainer .productDescriptionText { + font-family: "Open Sans", sans-serif; + font-weight: 400; font-size: 16px; line-height: 19px; display: block; color: #929292; padding-left: 32px; - content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque."; } @media only screen and (max-width: 1024px) { - .productDescriptionText::after { - padding: 0px 21px 0px 0; + .productDescriptionContainer .productDescriptionText { + padding: 0px 0px 0px 0; + } +} +@media only screen and (min-width: 1921px) { + .productDescriptionContainer .productDescriptionText { + font-size: 18px; } } \ No newline at end of file diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..ccbc54a 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,14 @@ -.row--menu-row { - padding-right: 24px; -} - -.row--menu-row .rowContainer { - align-items: flex-start; -} - -.row--payment-methods { - padding-top: 16px; -} +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); +/* Grid breakpoints */ +.socialNetworkWrapper, +.socialNetworksContainer { + margin: 0 !important; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 61412b8..ae73603 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -32,6 +32,11 @@ background-color: white; color: #BFBFBF; } +@media only screen and (min-width: 1921px) { + .listItem--DescricaoTab :global(.vtex-button) { + font-size: 24px; + } +} .listItemActive--DescricaoTab { border-bottom: 1px solid black; @@ -52,16 +57,15 @@ background-color: white; color: #000000; } +@media only screen and (min-width: 1921px) { + .listItemActive--DescricaoTab :global(.vtex-button) { + font-size: 24px; + } +} .container .contentContainer--DescricaoCont { padding-top: 32px; } -@media only screen and (max-width: 1024px) { - .container .contentContainer--DescricaoCont { - border-bottom: 1px solid #BFBFBF; - padding-bottom: 62px; - } -} .container--Descricao { padding-top: 16px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e664817..9e9b8e2 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -26,10 +26,11 @@ // quantity .flexRow--size-buy-button{ - @include mq (sm, max) { - margin: 0 0 16px 0 ; - .stretchChildrenWidth{ + @include mq (cstm, max) { +margin-left: 0; +margin-bottom: 16px; + .stretchChildrenWidth{ height: 74px; } } @@ -89,6 +90,14 @@ margin-left: 10px; } } +.flexRowContent--description { + border-bottom: 1px solid rgba(0,0,0,0.1); + @include mq (md, max) { + margin-bottom: 0px;} +} +.html--size-buy-button{ + width: 100%;} + diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 87332c5..35e4db1 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,6 +1,8 @@ .product-identifier__value { + font-family: $font-open; + font-weight: 400; font-size: 14px; line-height: 19px; color: #9292927a; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 5bf98b2..9f34af4 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -13,5 +13,8 @@ font-size: 25px; .installmentValue { font-weight: 700; } +.listPrice{ + display: block; +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 0c64fcd..28db065 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -7,7 +7,7 @@ } .quantitySelectorContainer{ - width: 128px; + width: 100%; height: 49px; @include mq (sm, max) { margin-bottom: 0; diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index a0bb02b..9e8d07d 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -10,7 +10,5 @@ } -.imageContainer { - height: 287px; -} + diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 5252858..5b37b61 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -26,7 +26,7 @@ &::before{ visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-left-ueber.png"); - margin-left: 40px; + } } @@ -35,7 +35,7 @@ &::after{ visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-right-ueber.png"); - margin-right: 40px; + } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index fbda4d6..3052d0d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -21,9 +21,12 @@ .productNameContainer { + font-family: $font-open; + font-weight: 300; font-size: 20px; line-height: 34px; - color: #575757; + + color: $color-gray8; display: flex; justify-content: flex-end; } @@ -82,11 +85,14 @@ margin-left: 16px; &::after { - + font-family: $font-open; + font-size: 14px; + font-weight: 400; + line-height: 19px; visibility: visible; display: block; content: "OUTRAS CORES:"; - font-size: 14px; + } @@ -124,11 +130,14 @@ margin-left: 16px; &::after { - + font-family: $font-open; + font-size: 14px; + font-weight: 400; + line-height: 19px; visibility: visible; display: block; content: "OUTROS TAMANHOS:"; - font-size: 14px; + } @@ -203,6 +212,28 @@ // cep .shippingContainer { + @include mq (cstm, max) { + display: block; + + :global(.vtex-address-form__postalCode) { + flex-direction: column; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + left: 0 !important; + margin-top: 0 !important; + display: flex; + justify-content: flex-end; + } + + :global(.vtex-button) { + right: 0 !important; + margin-top: 0 !important; + left: 86%; + bottom: 78px; + } + + } display: flex; padding: 0; @@ -465,44 +496,59 @@ //produto-indiponivel-fim // tab-descrição - -.productDescriptionTitle { - font-size: 24px; - line-height: 32px; - font-family: $font-open; - padding-left: 32px; - +.productDescriptionContainer { @include mq (md, max) { - padding-left: 0; - padding-top: 16px; + margin-bottom: 16px; } -} -.productDescriptionText { - font-size: 0; - &::after { - position: absolute; + + .productDescriptionTitle { + font-size: 24px; + line-height: 32px; + font-family: $font-open; + padding-left: 32px; + color: $color-gray8; + font-weight: 400; + + @include mq (md, max) { + padding-left: 0; + padding-top: 16px; + } + @include mq (xl, min) { + + font-size: 32px; + + } + + } + + .productDescriptionText { + + + + font-family: $font-open; + font-weight: 400; font-size: 16px; line-height: 19px; display: block; color: $color-gray6; padding-left: 32px; - content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque."; + @include mq (md, max) { - padding: 0px 21px 0px 0; - // border-bottom: 1px solid $color-gray7; - - + padding: 0px 0px 0px 0; } + @include mq (xl, min) { + font-size: 18px; } - + } } + // tab-descrição-fim diff --git a/styles/sass/pages/product/vtex.store-footer.scss b/styles/sass/pages/product/vtex.store-footer.scss new file mode 100644 index 0000000..67b2aa1 --- /dev/null +++ b/styles/sass/pages/product/vtex.store-footer.scss @@ -0,0 +1,4 @@ +.socialNetworkWrapper, +.socialNetworksContainer{ +margin: 0 !important; +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index bdf3ce3..0cc2fa4 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -26,6 +26,11 @@ background-color: white; color: $color-gray7; + @include mq (xl, min) { + + font-size: 24px; + + } } } @@ -47,6 +52,11 @@ background-color: white; color: $color-black2; + @include mq (xl, min) { + + font-size: 24px; + + } } } @@ -54,11 +64,6 @@ .contentContainer--DescricaoCont { padding-top: 32px; - @include mq (md, max) { - - border-bottom: 1px solid $color-gray7; - padding-bottom: 62px; - } } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 0f27e3e..5197112 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -21,8 +21,8 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, - cstm: 400, - sm: 768px, + cstm: 426px, + sm: 770px, md: 1025px, lg: 1920px, xl: 1921px