react/components/Html/styles.css

@@ -1,4 +1,10 @@
 [class*="html--wrapperQuantity"] {
     display: flex;
     margin-bottom: 16px;
+
+}
+@media screen and (max-width: 375px) {
+    [class*="html--wrapperQuantity"] {
+        flex-direction: column;
+    }
 }

react/components/Pix/Pix.tsx

@@ -23,6 +23,11 @@ const Pix = () => {
 
   // const handles = useCssHandles(CSS_HANDLES)
 
+  if (typeof document !== "undefined") {
+    const input = document.querySelector(".vtex-address-form-4-x-input");
+        input?.setAttribute("placeholder", "Digite seu CEP");
+  }
+
   return (
     <div className={styles.wrapperComponentPix}>
       <img className={styles.imagePix} src="https://agenciamagma.vteximg.com.br/arquivos/PixImg-RhayllonDaudt.png" alt="PixIcon" />

store/blocks/pdp/product.jsonc

@@ -23,7 +23,8 @@
 
   "breadcrumb#Pdp": {
     "props": {
-      "blockClass": "Pdp"
+      "blockClass": "Pdp",
+      "showOnMobile": true
     }
   },
 
@@ -89,7 +90,6 @@
         "phone": 2
       },
       "infinite": true,
-      "showNavigationArrows": "desktopOnly",
       "blockClass": "prateleiraSlider"
     }
   },
@@ -325,7 +325,7 @@
     "props": {
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
       "showNavigationArrows": false,
       "showPaginationDots": false,
@@ -376,6 +376,7 @@
     "children": ["vtex.store-components:product-name"]
   },
 
+
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
@@ -403,9 +404,7 @@
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7
+      "blockClass": "indisponivelWrapper"
     },
     "children": [
       "flex-layout.col#stack",
@@ -420,9 +419,9 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
-      "sku-selector",
-      "flex-layout.row#availability"
+      "product-identifier.product#identifierMain",
+      "flex-layout.row#availability",
+      "sku-selector#inverseOrder"
     ]
   },
   "flex-layout.row#availability": {

styles/css/vtex.breadcrumb.css

@@ -37,4 +37,11 @@
   padding: 0;
   width: 94.44%;
   margin: 0 auto;
+  max-width: 94rem;
+}
+@media screen and (max-width: 1024px) {
+  .container--Pdp {
+    width: 100%;
+    padding: 0 40px;
+  }
 }

styles/css/vtex.flex-layout.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -8,7 +9,37 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .flexRow--productMainWrapper {
-  padding: 0 36px;
+  width: 95%;
+  margin: 0 auto;
+}
+@media screen and (max-width: 1024px) {
+  .flexRow--productMainWrapper {
+    width: 100%;
+    margin: 0;
+    padding: 0 40px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRow--productMainWrapper :global(.vtex-store-components-3-x-container) {
+    padding: 0;
+  }
+}
+
+.flexRow--indisponivelWrapper {
+  width: 95%;
+  margin: 0 auto;
+}
+@media screen and (max-width: 1024px) {
+  .flexRow--indisponivelWrapper {
+    width: 100%;
+    margin: 0;
+    padding: 0 40px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRow--indisponivelWrapper :global(.vtex-store-components-3-x-container) {
+    padding: 0;
+  }
 }
 
 .flexRow--buyButton {
@@ -17,6 +48,12 @@
   width: 100%;
   margin-left: 10px;
 }
+@media screen and (max-width: 375px) {
+  .flexRow--buyButton {
+    margin-left: 0;
+    padding-top: 10px;
+  }
+}
 .flexRow--buyButton .flexRowContent--buyButton {
   margin: 0;
   height: 49px;
@@ -42,3 +79,132 @@
   color: #000000;
   margin: 0;
 }
+
+@media screen and (max-width: 1024px) {
+  .flexRow--descriptionRow :global(.vtex-store-components-3-x-container) {
+    padding: 0 !important;
+  }
+}
+
+.flexRowContent--productMainWrapper {
+  margin: 16px 0;
+  padding: 0;
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--productMainWrapper {
+    flex-direction: column;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--productMainWrapper .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
+}
+
+.flexRowContent--indisponivelWrapper {
+  margin: 16px 0;
+  padding: 0;
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--indisponivelWrapper {
+    flex-direction: column;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--indisponivelWrapper .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .flexRowContent--descriptionRow {
+    flex-direction: column;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--descriptionRow .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
+}
+.flexRowContent--descriptionRow .stretchChildrenWidth :global(.vtex-store-components-3-x-productImageTag--descriptionImg--main) {
+  object-fit: unset !important;
+  max-height: 994px !important;
+  margin-bottom: 16px;
+}
+
+.flexRow--message-availability :global(.vtex-store-components-3-x-title) {
+  font-size: 0;
+  margin: 0;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-title)::before {
+  content: "Produto indisponivel";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel) {
+  font-size: 0;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::before {
+  content: "Deseja saber quando estiver disponível?";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) {
+  display: grid;
+  grid-auto-flow: column;
+  max-width: 400px;
+  column-gap: 8px;
+}
+@media screen and (max-width: 1024px) {
+  .flexRow--message-availability :global(.vtex-store-components-3-x-content) {
+    width: 100%;
+  }
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) :last-child {
+  grid-area: 2/1/2/3;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
+  margin: 0;
+}
+.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
+  margin: 0;
+  margin-bottom: 15px;
+}
+.flexRow--message-availability :global(.vtex-button) {
+  width: 100%;
+  background-color: #000000;
+  font-size: 0;
+  height: 49px;
+  border-radius: 0;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+.flexRow--message-availability :global(.vtex-button)::before {
+  content: "Avise-me";
+  color: #fff;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  text-transform: uppercase;
+}
+.flexRow--message-availability :global(.vtex-button__label) {
+  display: none;
+}
+.flexRow--message-availability :global(.vtex-input-prefix__group) {
+  border-radius: 0;
+  border-color: #989898;
+}

styles/css/vtex.slider-layout.css

@@ -11,6 +11,12 @@
   width: 90.63%;
   margin: 0 auto 101px auto;
 }
+@media screen and (max-width: 1024px) {
+  .sliderLayoutContainer--prateleiraSlider {
+    width: 100% !important;
+    padding: 0 63px;
+  }
+}
 
 .sliderArrows--prateleiraSlider {
   margin: 0;
@@ -20,10 +26,20 @@
 .sliderRightArrow--prateleiraSlider {
   right: -2.53%;
 }
+@media screen and (max-width: 1024px) {
+  .sliderRightArrow--prateleiraSlider {
+    right: 3.91%;
+  }
+}
 
 .sliderLeftArrow--prateleiraSlider {
   left: -2.53%;
 }
+@media screen and (max-width: 1024px) {
+  .sliderLeftArrow--prateleiraSlider {
+    left: 3.91%;
+  }
+}
 
 .paginationDotsContainer--prateleiraSlider {
   bottom: -32px;

styles/css/vtex.store-components.css

@@ -14,10 +14,16 @@
 .productImageTag--ImgsMain--main {
   object-fit: unset !important;
 }
+@media screen and (max-width: 1024px) {
+  .productImageTag--ImgsMain--main {
+    max-height: 994px !important;
+  }
+}
 
 .productImagesThumb {
   width: 13.605% !important;
   margin: 0 16px 0 0;
+  max-width: 90px;
 }
 
 .productNameContainer--quickview {
@@ -30,6 +36,13 @@
   line-height: 34px;
   color: #575757;
 }
+@media screen and (max-width: 1024px) {
+  .productNameContainer--quickview {
+    justify-content: flex-start;
+    padding-top: 32px;
+  }
+}
+
 :global(.vtex-product-identifier-0-x-product-identifier--productReference) {
   display: flex;
   justify-content: end;
@@ -41,6 +54,11 @@
   line-height: 19px;
   color: rgba(146, 146, 146, 0.48);
 }
+@media screen and (max-width: 1024px) {
+  :global(.vtex-product-identifier-0-x-product-identifier--productReference) {
+    justify-content: flex-start;
+  }
+}
 
 .skuSelectorContainer--inverseOrder {
   display: flex;
@@ -133,6 +151,29 @@
   padding-top: 16.1px;
   text-decoration: underline;
 }
+@media screen and (max-width: 600px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: 55px;
+  }
+}
+@media screen and (max-width: 490px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: -85px;
+    top: 50px;
+  }
+}
+@media screen and (max-width: 450px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: -112px;
+    top: 50px;
+  }
+}
+@media screen and (max-width: 375px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    left: -78px;
+    top: 50px;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
   color: black;
 }
@@ -151,6 +192,21 @@
   border: none;
   border-radius: 0;
 }
+@media screen and (max-width: 490px) {
+  .shippingContainer :global(.vtex-button) {
+    right: 31%;
+  }
+}
+@media screen and (max-width: 425px) {
+  .shippingContainer :global(.vtex-button) {
+    right: 24%;
+  }
+}
+@media screen and (max-width: 375px) {
+  .shippingContainer :global(.vtex-button) {
+    right: 40px;
+  }
+}
 .shippingContainer :global(.vtex-button) ::before {
   content: "Ok";
   font-weight: 600;
@@ -241,3 +297,9 @@
   font-size: 16px;
   line-height: 22px;
 }
+
+@media screen and (max-width: 1024px) {
+  .productImagesGallerySlide--ImgsMain {
+    width: 100% !important;
+  }
+}

styles/css/vtex.tab-layout.css

@@ -11,11 +11,27 @@
   width: 94.44%;
   margin: 0 auto;
 }
+@media screen and (max-width: 1024px) {
+  .container--descriptionLayout {
+    width: 100%;
+    padding: 0 40px;
+  }
+}
 .container--descriptionLayout .listContainer--descriptionButtonWrapper {
   justify-content: space-between;
   border-bottom: 1px solid #B9B9B9;
   padding: 0 64px;
   margin-bottom: 32px;
+  max-width: 94rem;
+  margin: 0 auto 32px auto;
+}
+@media screen and (max-width: 1024px) {
+  .container--descriptionLayout .listContainer--descriptionButtonWrapper {
+    padding: 16px 0 0 0;
+    flex-direction: column;
+    margin-bottom: 16px;
+    border-top: 1px solid #B9B9B9;
+  }
 }
 .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton {
   margin: 0;
@@ -28,10 +44,19 @@
   font-size: 18px;
   line-height: 38px;
 }
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button):hover {
+  background-color: #fff;
+}
 .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
   padding: 0 16px !important;
   text-transform: capitalize;
 }
+@media screen and (max-width: 1024px) {
+  .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
+    margin-bottom: 16px;
+    padding: 0 !important;
+  }
+}
 .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton {
   margin-top: 2px;
 }
@@ -46,7 +71,17 @@
   font-size: 18px;
   line-height: 38px;
 }
+@media screen and (max-width: 1024px) {
+  .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
+    border: none;
+  }
+}
 .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
   padding: 0 16px !important;
   text-transform: capitalize;
 }
+@media screen and (max-width: 1024px) {
+  .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
+    padding: 0 !important;
+  }
+}

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -28,4 +28,10 @@
     padding: 0;
     width: 94.44%;
     margin: 0 auto;
+    max-width: 94rem;
+
+    @media screen and (max-width: 1024px) {
+        width: 100%;
+        padding: 0 40px;
+    }
 }

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

@@ -1,5 +1,34 @@
 .flexRow--productMainWrapper{
-    padding: 0 36px;
+    width: 95%;
+    margin: 0 auto;
+
+    @media screen and (max-width: 1024px) {
+        width: 100%;
+        margin: 0;
+        padding: 0 40px;
+    }
+    :global(.vtex-store-components-3-x-container){
+
+        @media screen and (max-width: 1024px) {
+            padding: 0;
+        }
+    }
+}
+.flexRow--indisponivelWrapper{
+    width: 95%;
+    margin: 0 auto;
+
+    @media screen and (max-width: 1024px) {
+        width: 100%;
+        margin: 0;
+        padding: 0 40px;
+    }
+    :global(.vtex-store-components-3-x-container){
+
+        @media screen and (max-width: 1024px) {
+            padding: 0;
+        }
+    }
 }
 .flexRow--buyButton{
     display: flex;
@@ -7,6 +36,11 @@
     width: 100%;
     margin-left: 10px;
 
+    @media screen and (max-width: 375px) {
+        margin-left: 0;
+        padding-top: 10px;
+    }
+
     .flexRowContent--buyButton{
         margin: 0;
         height: 49px;
@@ -34,3 +68,136 @@
     color: $color-black2;
     margin: 0;
 }
+.flexRow--descriptionRow{
+    :global(.vtex-store-components-3-x-container) {
+
+        @media screen and (max-width: 1024px) {
+            padding: 0 !important;
+        }
+    }
+}
+
+.flexRowContent--productMainWrapper{
+    margin: 16px 0;
+    padding: 0;
+
+    @media screen and (max-width: 1024px) {
+        flex-direction: column;
+    }
+
+    .stretchChildrenWidth{
+        @media screen and (max-width: 1024px) {
+            width: 100% !important;
+            padding: 0;
+        }
+    }
+}
+.flexRowContent--indisponivelWrapper{
+    margin: 16px 0;
+    padding: 0;
+
+    @media screen and (max-width: 1024px) {
+        flex-direction: column;
+    }
+
+    .stretchChildrenWidth{
+        @media screen and (max-width: 1024px) {
+            width: 100% !important;
+            padding: 0;
+        }
+    }
+}
+.flexRowContent--descriptionRow{
+    @media screen and (max-width: 1024px) {
+        flex-direction: column;
+    }
+
+    .stretchChildrenWidth {
+        @media screen and (max-width: 1024px) {
+            width: 100% !important;
+            padding: 0;
+        }
+
+        :global(.vtex-store-components-3-x-productImageTag--descriptionImg--main){
+            object-fit: unset !important;
+            max-height: 994px !important;
+            margin-bottom: 16px;
+        }
+    }
+}
+
+.flexRow--message-availability{
+    :global(.vtex-store-components-3-x-title){
+        font-size: 0;
+        margin: 0;
+        &::before {
+            content: "Produto indisponivel";
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 700;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-gray17;
+        }
+    }
+    :global(.vtex-store-components-3-x-subscribeLabel){
+        font-size: 0;
+        &::before {
+            content: "Deseja saber quando estiver disponível?";
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-gray17;
+        }
+    }
+    :global(.vtex-store-components-3-x-content){
+        display: grid;
+        grid-auto-flow: column;
+        max-width: 400px;
+        column-gap: 8px;
+
+        @media screen and (max-width: 1024px) {
+            width: 100%;
+        }
+
+        :last-child{
+            grid-area: 2/1/2/3;
+        }
+        :global(.vtex-store-components-3-x-inputEmail){
+            margin: 0;
+        }
+        :global(.vtex-store-components-3-x-inputName){
+            margin: 0;
+            margin-bottom: 15px;
+        }
+    }
+    :global(.vtex-button){
+        width: 100%;
+        background-color: $color-black2;
+        font-size: 0;
+        height: 49px;
+        border-radius: 0;
+        align-items: center;
+        justify-content: center;
+        display: flex;
+        &::before {
+            content: "Avise-me";
+            color: $color-white;
+            font-family: 'Open Sans';
+            font-style: normal;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 25px;
+            text-transform: uppercase;
+        }
+    }
+    :global(.vtex-button__label){
+       display: none;
+    }
+    :global(.vtex-input-prefix__group){
+       border-radius: 0;
+       border-color: $color-gray12;
+    }
+}

styles/sass/pages/product/vtex.product-summary.scss

@@ -25,12 +25,6 @@
 .image--prateleiraImg{
     min-height: 314px;
 
-    @media screen and (min-width: 1920px) {
-        
-    }
-    @media screen and (max-width: 1024px) {
-        
-    }
     @media screen and (max-width: 1280px) {
         min-height: 285px;
     }

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

@@ -1,6 +1,11 @@
 .sliderLayoutContainer--prateleiraSlider{
     width: 90.63%;
     margin: 0 auto 101px auto;
+
+    @media screen and (max-width: 1024px) {
+        width: 100% !important;
+        padding: 0 63px;
+    }
 }
 .sliderArrows--prateleiraSlider{
     margin: 0;
@@ -8,9 +13,17 @@
 }
 .sliderRightArrow--prateleiraSlider{
     right: -2.53%;
+
+    @media screen and (max-width: 1024px) {
+        right: 3.91%;
+    }
 }
 .sliderLeftArrow--prateleiraSlider{
     left: -2.53%;
+
+    @media screen and (max-width: 1024px) {
+        left: 3.91%;
+    }
 }
 .paginationDotsContainer--prateleiraSlider{
     bottom: -32px;

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

@@ -4,11 +4,16 @@
 
 .productImageTag--ImgsMain--main{
     object-fit: unset !important;
+
+    @media screen and (max-width: 1024px) {
+        max-height: 994px !important;
+    }
 }
 
 .productImagesThumb{
     width: 13.605% !important;
     margin: 0 16px 0 0;
+    max-width: 90px;
 }
 
 .productNameContainer--quickview{
@@ -21,8 +26,9 @@
     line-height: 34px;
     color: $color-gray14;
 
-    @media screen and (min-width: 1920px) {
-        
+    @media screen and (max-width: 1024px) {
+        justify-content: flex-start;
+        padding-top: 32px;
     }
 }
 
@@ -36,6 +42,10 @@
     font-size: 14px;
     line-height: 19px;
     color: $color-gray13;
+
+    @media screen and (max-width: 1024px) {
+        justify-content: flex-start;
+    }
 }
 
 .skuSelectorContainer--inverseOrder{
@@ -148,6 +158,22 @@
         padding-top: 16.1px;
         text-decoration: underline;
 
+        @media screen and (max-width: 600px) {
+            left: 55px;
+        }
+        @media screen and (max-width: 490px) {
+            left: -85px;
+            top: 50px;
+        }
+        @media screen and (max-width: 450px) {
+            left: -112px;
+            top: 50px;
+        }
+        @media screen and (max-width: 375px) {
+            left: -78px;
+            top: 50px;
+        }
+
         :last-child{
             color: black;
         }
@@ -169,6 +195,16 @@
         border: none;
         border-radius: 0;
 
+        @media screen and (max-width: 490px) {
+            right: 31%;
+        }
+        @media screen and (max-width: 425px) {
+            right: 24%;
+        }
+        @media screen and (max-width: 375px) {
+            right: 40px;
+        }
+
         ::before{
             content: "Ok";
             font-weight: 600;
@@ -263,3 +299,9 @@
     font-size: 16px;
     line-height: 22px;
 }
+
+.productImagesGallerySlide--ImgsMain{
+    @media screen and (max-width: 1024px) {
+        width: 100% !important;
+    }
+}

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

@@ -2,11 +2,25 @@
     width: 94.44%;
     margin: 0 auto;
 
+    @media screen and (max-width: 1024px) {
+        width: 100%;
+        padding: 0 40px;
+    }
+
     .listContainer--descriptionButtonWrapper{
         justify-content: space-between;
         border-bottom: 1px solid $color-gray6;
         padding: 0 64px;
         margin-bottom: 32px;
+        max-width: 94rem;
+        margin: 0 auto 32px auto;
+
+        @media screen and (max-width: 1024px) {
+            padding: 16px 0 0 0;
+            flex-direction: column;
+            margin-bottom: 16px;
+            border-top: 1px solid $color-gray6;
+        }
 
         .listItem--descriptionButton{
             margin: 0;
@@ -18,9 +32,18 @@
                 font-size: 18px;
                 line-height: 38px;
             }
+            :global(.vtex-button):hover{
+                background-color: $color-white;
+            }
+
             :global(.vtex-button__label){
                 padding: 0 16px !important;
                 text-transform: capitalize;
+
+                @media screen and (max-width: 1024px) {
+                    margin-bottom: 16px;
+                    padding: 0 !important;
+                }
             }
         }
         .listItemActive--descriptionButton{
@@ -35,10 +58,18 @@
                 font-weight: 400;
                 font-size: 18px;
                 line-height: 38px;
+
+                @media screen and (max-width: 1024px) {
+                    border: none;
+                }
             }
             :global(.vtex-button__label){
                 padding: 0 16px !important;
                 text-transform: capitalize;
+
+                @media screen and (max-width: 1024px) {
+                    padding: 0 !important;
+                }
             }
         }
     }

styles/sass/utils/_vars.scss

@@ -20,6 +20,7 @@ $color-gray13: rgba(146, 146, 146, 0.48);
 $color-gray14: #575757;
 $color-gray15: #929292;
 $color-gray16: #afafaf;
+$color-gray17: #868686;
 
 $color-blue: #4267b2;