feat: Cria o header para todas as telas

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

@@ -1,8 +1,25 @@
 /* _header.scss */
 .headerCheckout {
+    margin: 0;
+    width: 100%;
+    border-bottom: 1px solid $black-500;
+
     .container {
-        width: auto !important;
+        box-sizing: border-box;
+        width: 79.53125% !important;
+        margin: 29px auto 29.86px auto;
+
+        @include mq(tablet, max) {
+            width: 100% !important;
+            padding: 16px !important;
+            margin: 0;
+        }
+
+        @include mq(desktop4K, min) {
+            margin: 29px auto;
+        }
     }
+
     &__wrapper {
         align-items: center;
         display: flex;
@@ -10,27 +27,80 @@
     }
 
     &__logo {
+        width: 15.2829%;
+
+
+        @include mq(tablet, max) {
+            min-width: 119px;
+            width: 15.6834%;
+        }
+
+        @include mq(celular, max) {
+            width: 45.3586%;
+            min-width: auto;
+        }
+
+        @include mq(desktop4K, min) {
+            width: 19.2161%;
+        }
+
         img {
-            height: 52px;
+            width: 100%;
-            width: auto;
         }
     }
 
     &__safeBuy {
-        span {
+        width: 11.6896%;
-            align-items: center;
+        min-width: 119px;
-            display: flex;
+        display: flex;
-            text-transform: uppercase;
+        align-items: center;
-            font-family: $font-family;
+        justify-content: flex-end;
-            font-style: normal;
+
-            font-weight: normal;
+
-            font-size: 12px;
+        @include mq(tablet, max) {
-            line-height: 14px;
+            width: 11.996%;
-            color: $color-gray;
         }
 
-        i {
+        @include mq(celular, max) {
-            margin-right: 8px;
+            width: 34.69387%;
+            min-width: auto;
+
+        }
+
+        @include mq(desktop4K, min) {
+            width: 11.834%;
+        }
+
+        img {
+            width: 10.09%;
+
+            height: auto;
+
+            @include mq(tablet, max) {
+                width: 10.085%;
+            }
+
+            @include mq(desktop4K, min) {
+                width: 12.5255%;
+            }
+        }
+
+        span {
+            margin-left: 8px;
+
+            font-family: "Open Sans";
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            text-transform: uppercase;
+            color: $black-300;
+
+            @include mq(desktop4K, min) {
+                margin-left: 7.9px;
+
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
     }
 }

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

@@ -1,6 +1,10 @@
 .progress-bar {
     width: 439px;
 
+    @include mq(tablet, max) {
+        display: none;
+    }
+
     @include mq(desktop4K, min) {
         width: 1078.86px;
     }
@@ -12,7 +16,6 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-
     }
 
     &__li {
@@ -38,7 +41,6 @@
     &__central {
         width: auto;
         flex: 1;
-
     }
 
     &__container {
@@ -55,14 +57,19 @@
         align-items: center;
     }
 
-
     &__title {
-        font-family: 'Tenor Sans';
+        font-family: "Tenor Sans";
         font-weight: 400;
         font-size: 12px;
         line-height: 14px;
 
         margin-bottom: 9px;
+        color: $black-500;
+
+        @include mq(desktop4K, min) {
+            font-size: 24px;
+            line-height: 28px;
+        }
     }
 
     #progress-bar__circle-1,
@@ -73,10 +80,14 @@
         border: 1px solid $black-500;
         border-radius: 50%;
 
+        @include mq(desktop4K, min) {
+            width: 24px;
+            height: 24px;
+        }
+
         &.active {
             background-color: $black-500;
         }
-
     }
 
     &__line-1,
@@ -87,6 +98,10 @@
 
         height: 1px;
         border-top: 1px solid $black-500;
+
+        @include mq(desktop4K, min) {
+            bottom: 9px;
+        }
     }
 
     &__line-1 {
@@ -94,8 +109,8 @@
         width: 95%;
 
         @include mq(desktop4K, min) {
-            left: 10%;
+            left: 21%;
-            width: 108.5%;
+            width: 96%;
         }
     }
 
@@ -104,9 +119,8 @@
         width: 100%;
 
         @include mq(desktop4K, min) {
-            right: 9%;
+            right: 17%;
-        width: 109%;
+            width: 100%;
         }
     }
-
 }

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

@@ -21,6 +21,7 @@ $color-green: #4caf50;
 
 /*CORES*/
 $black-500: #000;
+$black-300: #292929;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
@@ -29,7 +30,10 @@ $grid-breakpoints: (
 	sm: 576px,
 	md: 768px,
 	lg: 992px,
-	xl: 1200px
+	xl: 1200px,
+    celular: 600px,
+    tablet: 1025px,
+    desktop4K: 2500px
 ) !default;
 
 $z-index: (