feat(header): Aplica css no header mobiles

checkout/src/arquivos/js/components/Header.js

@@ -56,9 +56,7 @@ export default class Header {
                 </li>
             </ul>
             `;
-        }
-
-        if(this.progressBar && window.innerWidth <= 1024) {
+        } else if(this.progressBar && window.innerWidth <= 1024) {
             this.progressBar.innerHTML = "";
         }
     }

checkout/src/arquivos/sass/partials/_header.scss

@@ -1,8 +1,17 @@
 /* _header.scss */
 .headerCheckout {
     .container {
+        width: 96.875%;
+        padding: 16px 0 !important;
+
+        @include mq(xm, min) {
             width: 79.53125%;
             padding: 29px 0;
+        }
+
+        @include mq(xp, max) {
+            width: 91.4666%;
+        }
 
         #progressBar {
             width: 440px;
@@ -131,19 +140,30 @@
     }
 
     &__wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        @include mq(xm, min) {
             display: grid;
             grid-template-columns: 2fr 1fr 2fr;
             align-items: center;
         }
+    }
 
     &__logo {
         display: block;
-        width: 53.741%;
+        max-width: 155px;
+        width: 100%;
 
         @include mq(xg, min) {
             width: 382px;
         }
 
+        @include mq(xpp, max) {
+            min-width: 45.2%;
+        }
+
         img {
             width: 100%;
             height: auto;
@@ -155,6 +175,11 @@
         align-items: center;
         justify-content: flex-end;
         gap: 8px;
+        min-width: 119px;
+
+        @include mq(xm, min) {
+            width: 100%;
+        }
 
         span {
             align-items: center;

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -23,10 +23,13 @@ $color-green: #4caf50;
 /* Grid breakpoints */
 $grid-breakpoints: (
 	xs: 0,
-	cstm: 400,
+    xpp: 376px,
+	cstm: 400px,
 	sm: 576px,
+    xp: 599px,
 	md: 768px,
 	lg: 992px,
+    xm: 1025px,
 	xl: 1200px,
     xg : 2500px
 ) !default;