Adiciona estilização do header

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

@@ -1,32 +1,127 @@
 /* _header.scss */
 .headerCheckout {
+    width: auto !important;
+    border-bottom: 1px solid $color-black;
+    margin: 0;
+
+    @media screen and (min-width: 375px) and (max-width: 1024px) {
+        padding: 16px 16px;
+    }
     .container {
-        width: auto !important;
+        width: 79.53%;
+
+        @media screen and (min-width: 375px) and (max-width: 1024px) {
+            width: 96.875%;
+        }
     }
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
+        padding: 29px 0;
+
+        .progress-bar {
+            @media screen and (max-width: 1024px) {
+                display: none;
+            }
+            .progresswrapper::before {
+                content: "";
+                background: $color-black-1000;
+                position: absolute;
+                top: 31px;
+                left: 14px;
+                height: 1px;
+                width: 83%;
+                z-index: -1;
+                transform: translateY(-50%);
+            }
+
+            .progresswrapper {
+                display: flex;
+                justify-content: space-between;
+                position: relative;
+                width: 439px;
+
+                .progresstext {
+                    position: relative;
+                }
+
+                span {
+                    display: block;
+                    margin-bottom: 9px;
+                    font-size: 12px;
+                    line-height: 14px;
+                    font-family: $font-family-secundary;
+                    transform: translateX(-40%);
+                }
+            }
+
+            .progress {
+                background: $color-black;
+                position: absolute;
+                top: 50%;
+                left: 0;
+                transform: translateY(-50%);
+                height: 4px;
+                width: 0%;
+                z-index: -1;
+                transition: 0.4s ease;
+            }
+
+            .progresstext {
+                position: relative;
+
+                .progresscircle1,
+                .progresscircle2,
+                .progresscircle3 {
+                    background: $color-white;
+                    color: $color-black;
+                    border-radius: 50%;
+                    height: 12px;
+                    width: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border: 1px solid $color-black;
+                    transition: 0.4s ease;
+                }
+
+                .progressActive {
+                    background: $color-black-1000;
+                }
+            }
+        }
     }
 
     &__logo {
         img {
             height: 52px;
             width: auto;
+
+            @media screen and (min-width: 375px) and (max-width: 1024px) {
+                height: 33px;
+            }
         }
     }
 
     &__safeBuy {
+        display: flex;
+        gap: 8px;
+
+        img {
+            max-width: 12px;
+            height: 15px;
+        }
         span {
             align-items: center;
             display: flex;
             text-transform: uppercase;
             font-family: $font-family;
             font-style: normal;
-            font-weight: normal;
+            font-weight: 400;
             font-size: 12px;
-            line-height: 14px;
+            line-height: 16px;
-            color: $color-gray;
+            color: $color-black;
         }
 
         i {