From a29c06500b3a1ef563f8446767e7f44487cde99d Mon Sep 17 00:00:00 2001
From: Luiz Felipe Silva <felipesilva9627@hotmail.com>
Date: Mon, 26 Dec 2022 20:56:52 -0300
Subject: [PATCH] =?UTF-8?q?feat(checkout):=20criado=20e=20modificado=20est?=
 =?UTF-8?q?iliza=C3=A7=C3=A3o.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sass/checkout/_checkout-carrinho.scss     | 684 ++++++++++++------
 1 file changed, 448 insertions(+), 236 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 195f487..2adfc49 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -4,19 +4,39 @@
     }
 }
 
+.cart-items {
+    .product-name {
+        width: auto;
+    }
+}
+
 .cart-template {
     font-family: $font-family;
+
     @include mq(md, max) {
         padding: 0 0;
     }
+
+    .summary-totalizers {
+        // Voltar
+        @include mq(xl, min) {
+            min-width: 688px;
+        }
+    }
+
+    .ship-country {
+        display: none;
+    }
+
     .item-unit-label {
         display: none;
     }
+
     .cart {
-        border: 3px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
-        padding: 16px;
+        padding: 17px;
+        border: 1px solid $color-gray3;
 
         @include mq(md, max) {
             margin: 0px 0 25px 0;
@@ -25,18 +45,38 @@
             border-radius: 0;
         }
     }
+
     .cart-fixed.affix {
         position: relative !important;
     }
+
     .cart-fixed {
+        height: 370px !important;
+        border: 1px solid $color-gray5;
+        border-radius: 8px;
         font-family: $font-family;
-        width: 100%;
+        width: 99%;
+
         h2 {
-            background: $color-white;
+            font-family: $font-family-secundary;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 19px;
+            background: $color-white1;
             border: none;
-            color: #303030;
-            font-size: 14px;
-            font-weight: 500;
+            text-align: left;
+            color: $color-black1;
+            margin: 16px 0 1px 10px;
+
+            @include mq(xl, min) {
+                font-size: 32px;
+                line-height: 37px;
+            }
+        }
+
+        .summary-cart-template-holder {
+            height: 46% !important;
+            overflow: hidden;
         }
 
         .item-unavailable {
@@ -48,8 +88,6 @@
         }
 
         .cart {
-            border: 1px solid $color-gray4;
-
             ul li {
                 border-top: none;
                 margin-top: 0;
@@ -60,17 +98,12 @@
                     padding-top: 8px;
                     border-top: 1px solid #e5e5e5;
                 }
-
-                .shipping-date,
-                .price {
-                    color: #7d7d7d;
-                }
             }
         }
 
         .summary-template-holder {
             border-top: none;
-            background: $color-white;
+            background: $color-white1;
         }
 
         #go-to-cart-button a {
@@ -85,24 +118,32 @@
         }
 
         #payment-data-submit {
-            background: $color-black;
+            width: 100%;
+            height: 42px;
+            margin-top: 28px;
+            background: $color-green2;
             border: none;
-            border-radius: 0;
-            color: $color-white;
+            border-radius: 8px;
+            color: $color-white1;
             outline: none;
-            transition: all 0.2s linear;
-            &:hover {
-                background: lighten($color-black, 5);
+
+            span {
+                font-family: $font-family;
+                font-size: 14px;
+                font-weight: 700;
+                line-height: 19px;
+                letter-spacing: 0.05em;
+                text-transform: uppercase;
             }
 
-            &:active {
-                background: darken($color-black, 5);
+            i {
+                display: none;
             }
         }
     }
 
     .lookatme {
-        background-color: $color-white;
+        background-color: $color-white1;
     }
 
     .cart-items {
@@ -111,12 +152,17 @@
         }
 
         th {
-            color: $color-black;
-            padding: 0 0 16px;
-            font-style: normal;
-            font-weight: bold;
+            font-family: $font-family-secundary;
             font-size: 14px;
+            font-weight: 400;
             line-height: 16px;
+            text-align: left;
+            color: $color-black1;
+
+            @include mq(xl, min) {
+                font-size: 28px;
+                line-height: 33px;
+            }
 
             @include mq(md, max) {
                 &.quantity-price,
@@ -126,10 +172,16 @@
             }
         }
 
+        th.product,
+        th.shipping-date,
+        th.product-price,
+        th.quantity,
+        th.quantity-price {
+            padding: 0 0 18px 0;
+        }
+
         .product-image {
-            height: auto;
             padding: 0;
-            width: 60px;
 
             @include mq(sm, max) {
                 width: 72px;
@@ -137,8 +189,15 @@
 
             img {
                 height: 60px;
-                max-width: 100%;
+                min-width: 60px;
                 width: auto;
+                margin-right: 15px;
+
+                @include mq(xl, min) {
+                    min-width: 146px;
+                    height: 146px;
+                    margin-right: 31px;
+                }
 
                 @include mq(sm, max) {
                     height: 72px;
@@ -147,52 +206,134 @@
             }
         }
 
-        .product-name {
-            padding-right: 0;
+        .hproduct {
+            display: flex;
+            align-items: center;
 
-            @include mq(lg, max) {
-                width: 250px;
+            img {
+                min-width: 60px;
+                height: 60px;
+
+                @include mq(xl, min) {
+                    min-width: 116px;
+                    height: 116px;
+                }
             }
 
+            .description {
+                width: 80%;
+                margin-top: 0;
+
+                .shipping-date {
+                    display: none;
+                }
+
+                strong {
+                    font-family: $font-family;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    color: $color-black2;
+
+                    @include mq(xl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
+                }
+            }
+
+            .quantity {
+                display: none;
+            }
+
+            .product-name {
+                white-space: normal;
+                font-family: $font-family-secundary;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 14px;
+                color: $color-black2;
+
+                @include mq(xl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+
+                a {
+                    font-family: $font-family-secundary;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 14px;
+                    color: $color-black2;
+                    margin-left: 16px;
+
+                    @media (max-width: 490px) {
+                        margin-left: 23px;
+                    }
+                }
+
+                .brand,
+                .seller {
+                    display: none !important;
+                }
+            }
+        }
+
+        td {
+            padding: 0;
+
             a {
-                color: $color-blue;
-                font-style: normal;
-                font-weight: normal;
+                color: $color-black2;
                 font-size: 12px;
-                line-height: 14px;
-                transition: ease-in 0.22s all;
+                font-weight: 400;
+                text-align: left;
+                font-family: $font-family-secundary;
 
-                &:hover {
-                    color: darken($color-blue, 10);
-                    text-decoration: none;
+                @include mq(xl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
                 }
-
-                @media (max-width: 490px) {
-                    margin-left: 23px;
-                }
-            }
-
-            .brand,
-            .seller {
-                display: none !important;
             }
         }
 
         td.shipping-date {
-            color: $color-gray2;
             font-size: 12px;
+            text-align: left;
+            font-weight: 400;
             line-height: 14px;
+            vertical-align: initial;
+            padding-right: 50px;
+            color: $color-gray7;
+            text-transform: lowercase;
+
+            @include mq(xl, min) {
+                font-size: 24px;
+                line-height: 28px;
+                vertical-align: inherit;
+            }
 
             @include mq(md, max) {
                 display: none;
             }
         }
 
-        .product-price {
+        td.product-price {
             min-width: 100px;
+            text-align: left;
+
+            .best-price {
+                span {
+                    @include mq(xl, min) {
+                        font-size: 28px;
+                        line-height: 33px;
+                    }
+                }
+            }
+
             @include mq(md, max) {
                 min-width: 78px;
             }
+
             @media (max-width: 490px) {
                 position: absolute;
                 bottom: 0;
@@ -200,10 +341,17 @@
             }
 
             span.list-price {
-                color: $color-gray2;
-                font-size: 12px;
-                line-height: 14px;
+                color: $color-gray7;
                 text-decoration-line: line-through;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 14px;
+
+                @include mq(xl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+
                 @include mq(sm, max) {
                     font-size: 12px;
                     line-height: 14px;
@@ -216,61 +364,73 @@
         }
 
         td.quantity {
+            border-radius: 8px;
             align-items: center;
             border: 1px solid $color-gray3;
-            border-radius: 0;
             box-sizing: border-box;
             display: flex;
-            justify-content: center;
-            margin: 6px auto 0;
-            max-height: 38px;
             max-width: 118px;
+            max-height: 38px;
             padding: 0;
             width: max-content !important;
 
+            @include mq(xl, min) {
+                max-height: 50px;
+                margin-top: 38px;
+            }
+
             @media (max-width: 490px) {
                 margin-left: 84px !important;
             }
 
             input {
-                background-color: $color-white;
-                border: 1px solid $color-gray3;
+                font-family: $font-family-secundary;
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 16px;
+                background-color: $color-white1;
+                border: none;
                 border-radius: 0;
-                border-width: 0 1px;
                 display: block;
                 max-height: 38px;
                 margin: 0 !important;
                 padding: 8px 0;
                 width: 38px;
-                color: $color-gray2;
+                color: $color-black2;
                 box-shadow: none;
 
                 @include mq(lg, max) {
                     width: 24px !important;
                 }
-            }
 
-            .icon-plus-sign,
-            .icon-minus-sign {
-                &::before {
-                    color: $color-black;
-                    display: block;
-                    font-weight: 500;
-                    padding: 1px 12px;
-                }
-            }
-
-            .icon-minus-sign {
-                &:before {
-                    content: "-";
-                    font-size: 16px;
+                @include mq(xl, min) {
+                    font-size: 28px;
+                    line-height: 32px;
                 }
             }
 
             .icon-plus-sign {
+                &::before {
+                    padding: 9px 11px 9px 3px;
+                }
+            }
+
+            .icon-minus-sign {
+                &::before {
+                    padding: 9px 3px 9px 11px;
+                }
+            }
+
+            .icon-plus-sign,
+            .icon-minus-sign {
                 &:before {
-                    content: "+";
-                    font-size: 14px;
+                    color: $color-blue2;
+                    font-size: 18px;
+                    display: block;
+
+                    @include mq(xl, min) {
+                        font-size: 32px;
+                    }
                 }
             }
 
@@ -295,28 +455,58 @@
             .icon-question-sign {
                 display: none;
             }
+
             span {
-                font-style: normal;
-                font-weight: normal;
                 font-size: 14px;
+                font-weight: 400;
                 line-height: 16px;
-                color: $color-black;
+                color: $color-black1;
+            }
+
+            .new-product-price-label {
+                text-transform: lowercase;
             }
         }
 
-        .quantity-price {
+        td.quantity-price {
+            vertical-align: initial;
+            text-align: left;
+
+            @include mq(xl, min) {
+                min-width: 154px;
+            }
+
+            span {
+                font-family: $font-family;
+                font-size: 14px;
+                font-weight: 700;
+                line-height: 19px;
+
+                @include mq(xl, min) {
+                    font-size: 28px;
+                    line-height: 38px;
+                }
+            }
+
             @include mq(md, max) {
                 display: none;
             }
         }
 
         .item-remove {
+            vertical-align: initial;
+
             @media (max-width: 490px) {
                 top: 0;
             }
+
             .icon::before {
-                color: $color-gray4;
-                font-size: 15px;
+                color: $color-gray6;
+                font-size: 13px;
+
+                @include mq(xl, min) {
+                    font-size: 25px;
+                }
 
                 @include mq(md, max) {
                     font-size: 18px;
@@ -326,7 +516,7 @@
 
         .item-unavailable-message {
             background-color: #d8c8ac;
-            color: $color-white;
+            color: $color-white1;
 
             .icon-warning-sign {
                 color: #bb4f4f;
@@ -350,51 +540,72 @@
                     padding: 0 16px;
                 }
 
-                .srp-main-title {
-                    margin: 32px 0 12px;
-                    font-style: normal;
-                    font-weight: normal;
-                    font-size: 24px;
-                    line-height: 28px;
-                    color: $color-gray2;
-
-                    @include mq(md, max) {
-                        margin-top: 0;
-                    }
-                }
-
-                .srp-description {
-                    color: $color-gray2;
-                    font-size: 12px;
-                    line-height: 18px;
-                    margin: 0 0 12px;
-                }
-
-                button.shp-open-options {
-                    background-color: $color-gray5;
-                    border: none;
-                    border-radius: 5px;
-                    color: $color-gray2;
-                    font-size: 16px;
-                    letter-spacing: 0.05em;
-                    line-height: 19px;
-                    font-weight: 500;
-                    outline: none;
-                    padding: 12px 40px;
-                    transition: all 0.2s linear;
-
-                    &:hover {
-                        background-color: lighten($color-gray5, 5);
+                .srp-content {
+                    @include mq(xl, min) {
+                        max-width: 552px;
                     }
 
-                    &:active {
-                        background-color: darken($color-gray5, 5);
+                    .srp-main-title {
+                        font-family: $font-family;
+                        font-size: 24px;
+                        font-weight: 400;
+                        line-height: 33px;
+                        line-height: 32px;
+                        color: $color-black2;
+                        margin-bottom: 11px;
+
+                        @include mq(xl, min) {
+                            font-size: 48px;
+                            line-height: 65px;
+                        }
+
+                        @include mq(md, max) {
+                            margin-top: 0;
+                        }
+                    }
+
+                    .srp-description {
+                        font-family: $font-family;
+                        font-size: 14px;
+                        font-weight: 400;
+                        line-height: 18px;
+                        color: $color-gray2;
+                        margin: 0 0 0;
+                        max-width: 18rem;
+
+                        @include mq(xl, min) {
+                            font-size: 28px;
+                            line-height: 36px;
+                            min-width: 552px;
+                        }
+                    }
+
+                    button.shp-open-options {
+                        background-color: $color-gray8;
+                        font-family: $font-family;
+                        font-size: 14px;
+                        font-weight: 400;
+                        line-height: 19px;
+                        letter-spacing: 0.05em;
+                        color: $color-black2;
+                        border: none;
+                        border-radius: 8px;
+                        outline: none;
+                        width: 157px;
+                        height: 44px;
+
+                        @include mq(xl, min) {
+                            font-size: 28px;
+                            width: 230px;
+                            height: 44px;
+                        }
                     }
                 }
             }
 
             .srp-data {
                 width: 280px;
+                margin-top: 0;
 
                 @include mq(cstm, max) {
                     width: calc(100vw - 32px);
@@ -405,58 +616,50 @@
                 }
 
                 .srp-pickup-my-location__button {
-                    background-color: $color-black;
+                    background-color: $color-blue2;
                     border: none;
-                    border-radius: 5px;
-                    color: $color-white;
+                    border-radius: 8px;
+                    color: $color-white1;
                     outline: none;
                     width: 100%;
-
-                    font-style: normal;
-                    font-weight: 500;
+                    height: 42px;
+                    font-family: $font-family;
                     font-size: 14px;
-                    line-height: 16px;
+                    font-weight: 700;
+                    line-height: 19px;
                     letter-spacing: 0.05em;
-
-                    &:hover {
-                        background-color: lighten($color-black, 5);
-                    }
-
-                    &:active {
-                        background-color: darken($color-black, 5);
-                    }
+                    margin-top: 6px;
                 }
             }
 
             .srp-toggle {
-                margin: 0 0 34px;
+                margin: 0 0 10px;
 
                 &__wrapper {
-                    background-color: $color-white;
+                    background-color: $color-white1;
                     border-radius: 100px;
                     width: 100%;
                     font-family: $font-family;
-                    font-style: normal;
-                    font-weight: normal;
-                    font-size: 14px;
-                    line-height: 16px;
                     text-transform: uppercase;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 19px;
                 }
 
                 &__current {
-                    border: 1px solid $color-blue;
+                    border: 1px solid $color-black2;
                     border-radius: 100px;
                 }
 
                 .blue {
-                    color: $color-blue;
+                    color: $color-black2;
                 }
 
                 label {
                     width: 50%;
 
                     &:active {
-                        background-color: #f0f0f0;
+                        background-color: $color-white1;
                     }
                 }
             }
@@ -469,15 +672,14 @@
                         font-weight: normal;
                         font-size: 12px;
                         line-height: 14px;
-                        color: $color-black;
-                        margin-bottom: 12px;
+                        color: $color-black1;
+                        margin-bottom: 2px;
                     }
 
                     input {
-                        border: 1px solid $color-gray3;
+                        border: 1px solid $color-gray6;
                         border-radius: 5px;
                         box-shadow: none;
-                        color: $color-gray3;
                         font-size: 12px;
                         height: 36px;
                         padding: 12px 8px;
@@ -485,38 +687,31 @@
                     }
 
                     & ~ button {
-                        background-color: $color-black;
+                        background-color: $color-blue2;
                         border: none;
-                        border-radius: 5px;
-                        color: $color-white;
-                        font-size: 12px;
+                        border-radius: 8px;
+                        color: $color-white1;
                         height: 36px;
-                        letter-spacing: 1px;
                         outline: none;
                         position: absolute;
                         right: -150px;
-                        top: 36px;
-                        transition: all 0.2s linear;
-                        width: 96px;
+                        bottom: 21px;
+                        width: 100px;
                         text-transform: uppercase;
-
-                        &:hover {
-                            background-color: lighten($color-black, 5);
-                        }
-
-                        &:active {
-                            background-color: darken($color-black, 5);
-                        }
+                        font-family: $font-family;
+                        font-size: 14px;
+                        font-weight: 700;
+                        line-height: 19px;
+                        letter-spacing: 0.05em;
                     }
 
                     small a {
-                        font-family: $font-family;
-                        font-style: normal;
-                        font-weight: normal;
+                        font-family: $font-family-secundary;
                         font-size: 10px;
+                        font-weight: 400;
                         line-height: 12px;
-                        color: $color-blue;
-                        margin-top: 7px;
+                        color: $color-black1;
+                        margin-top: 4px;
                     }
 
                     span.help.error {
@@ -525,7 +720,7 @@
                         position: absolute;
                         left: 0;
                         width: 100%;
-                        top: 17px;
+                        top: 85px;
                     }
                 }
             }
@@ -597,19 +792,24 @@
             .coupon-data {
                 #cart-link-coupon-add {
                     text-decoration: none;
+
                     &:hover {
                         text-decoration: underline;
-                        cursor: pointer;
                     }
                 }
+
                 span {
-                    font-family: $font-family;
-                    font-style: normal;
-                    font-weight: normal;
+                    margin-bottom: 20px;
+                    font-family: $font-family-secundary;
                     font-size: 12px;
+                    font-weight: 400;
                     line-height: 14px;
-                    color: $color-blue;
-                    text-decoration: none;
+                    color: $color-black2;
+
+                    @include mq(xl, min) {
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
                 }
             }
 
@@ -623,13 +823,8 @@
                     margin: 0;
                 }
 
-                .link-coupon-add {
-                    color: #303030;
-                    font-size: 12px;
-                    text-decoration: underline;
-                }
-
                 .coupon-label label {
+                    text-align: left;
                     margin-bottom: 12px;
                     font-family: $font-family;
                     font-style: normal;
@@ -641,7 +836,7 @@
                 }
 
                 .coupon-fields {
-                    margin-bottom: 32px;
+                    margin-bottom: 38px;
 
                     @include mq(sm, max) {
                         span {
@@ -657,14 +852,17 @@
                     }
 
                     input {
-                        border: 2px solid $color-gray3;
+                        border: 1px solid $color-gray5;
                         border-radius: 5px;
                         box-shadow: none;
-                        color: $color-gray4;
-                        font-size: 12px;
-                        height: 34px;
+                        color: $color-gray7;
                         padding: 0 12px;
-                        max-width: 160px;
+                        width: 193px;
+                        font-family: $font-family;
+                        font-size: 12px;
+                        font-weight: 400;
+                        line-height: 14px;
+                        height: 36px;
 
                         @include mq(sm, max) {
                             max-width: 100%;
@@ -673,37 +871,32 @@
                     }
 
                     button {
-                        background: $color-black;
+                        font-family: $font-family;
+                        font-size: 14px;
+                        font-weight: 400;
+                        line-height: 19px;
+                        letter-spacing: 0.05em;
+                        background: $color-blue2;
                         border: none;
-                        border-radius: 5px;
-                        color: $color-white;
-                        font-size: 12px;
-                        height: 36px;
-                        letter-spacing: 1px;
-                        margin-left: 6px;
+                        border-radius: 8px;
+                        color: $color-black2;
+                        margin-left: 12px;
                         outline: none;
-                        transition: all 0.2s linear;
-                        width: 94px;
                         text-transform: uppercase;
+                        padding: 9px 15px;
+                        height: 36px;
+                        max-width: 133px;
 
                         @include mq(md, max) {
                             width: 138px;
                         }
-
-                        &:hover {
-                            background-color: lighten($color-black, 5);
-                        }
-
-                        &:active {
-                            background-color: darken($color-black, 5);
-                        }
                     }
                 }
             }
 
             .accordion-group {
                 tr {
-                    border-color: #e5e5e5;
+                    border-color: $color-gray5;
 
                     td {
                         &.empty {
@@ -712,12 +905,17 @@
 
                         &.info,
                         &.monetary {
-                            font-style: normal;
-                            font-weight: normal;
+                            font-family: $font-family-secundary;
                             font-size: 14px;
+                            font-weight: 400;
                             line-height: 16px;
-                            color: $color-black;
-                            padding: 12px 0;
+                            color: $color-black1;
+                            padding: 7px 0;
+
+                            @include mq(xl, min) {
+                                font-size: 28px;
+                                line-height: 33px;
+                            }
                         }
 
                         &.info {
@@ -733,11 +931,17 @@
                 tfoot {
                     td.info,
                     td.monetary {
-                        font-style: normal;
-                        font-weight: normal;
+                        padding-top: 9px;
+                        font-weight: 700;
                         font-size: 18px;
-                        line-height: 21px;
-                        color: $color-black;
+                        line-height: 24px;
+                        color: $color-black1;
+
+                        @include mq(xl, min) {
+                            font-size: 36px;
+                            line-height: 49px;
+                            width: 200px;
+                        }
                     }
                 }
             }
@@ -749,6 +953,10 @@
         flex-direction: column;
         width: 343px;
 
+        @include mq(xl, min) {
+            width: 688px;
+        }
+
         @include mq(md, max) {
             padding: 0 16px;
             width: calc(100% - 32px);
@@ -758,7 +966,7 @@
 
         @include mq(md, min) {
             margin: 0;
-            padding-bottom: 50px;
+            //padding-bottom: 50px;
         }
 
         .link-choose-more-products-wrapper {
@@ -771,40 +979,44 @@
             }
 
             a {
-                font-family: $font-family;
-                font-style: normal;
-                font-weight: normal;
+                font-family: $font-family-secundary;
                 font-size: 12px;
+                font-weight: 400;
                 line-height: 14px;
-                color: $color-blue;
+                color: $color-black2;
+
+                @include mq(xl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
             }
         }
 
         .btn-place-order-wrapper {
             a {
-                background: $color-green;
+                background: $color-blue2;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 display: block;
                 font-size: 0;
-                transition: ease-in 0.22s all;
-                padding: 12px 19px;
-
-                &:hover {
-                    background-color: darken($color-green, 5);
-                }
+                max-width: 100%;
 
                 &:after {
                     content: "finalizar compra";
                     font-family: $font-family;
-                    font-weight: 500;
-                    font-size: 13px;
+                    font-weight: 700;
+                    font-size: 14px;
                     letter-spacing: 0.05em;
-                    color: $color-white;
+                    color: $color-black2;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;
                     text-shadow: none;
+
+                    @include mq(xl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
             }
         }