feat(header): Aplica css na barra de progresso

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -3,6 +3,10 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
+* {
+    box-sizing: border-box;
+}
+
 html {
     height: 100%;
     min-height: 100%;

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

@@ -1,12 +1,111 @@
 /* _header.scss */
 .headerCheckout {
+    padding: 29px 0;
+
     .container {
         width: auto !important;
-    }
+
-    &__wrapper {
+        #progressBar {
-        align-items: center;
+            width: 439px;
+
+            ul {
+                list-style-type: none;
                 display: flex;
+                align-items: center;
                 justify-content: space-between;
+                margin: 0 !important;
+            }
+
+            li {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                width: 39.40%;
+            }
+
+            li .container-li {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                position: relative;
+            }
+
+            li:first-child .container-li {
+                align-items: flex-start;
+            }
+
+            li:last-child .container-li {
+                align-items: flex-end;
+            }
+
+            li .progress-bar-center {
+                width: auto;
+            }
+
+            li .progress-bar-center .container-li {
+                align-items: center;
+                margin-left: 7px;
+            }
+
+            li .container-li div {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+            }
+
+            li .container-li div .progress-bar-text {
+                font-family: $font-family-secundary;
+                line-height: 14px;
+                font-size: 12px;
+                font-weight: 400;
+                color: $color-black2;
+                margin-bottom: 9px;
+            }
+
+            #progress-bar-circle-1,
+            #progress-bar-circle-2,
+            #progress-bar-circle-3 {
+                width: 12px;
+                height: 12px;
+                border: 1px solid $color-black2;
+                background-color: $color-white;
+                border-radius: 50%;
+                z-index: map-get($z-index, level2 );
+            }
+
+            #progress-bar-circle-1.active,
+            #progress-bar-circle-2.active,
+            #progress-bar-circle-3.active {
+                border: none;
+                background-color: $color-black2;
+            }
+
+            .progress-bar-line-1,
+            .progress-bar-line-2 {
+                position: absolute;
+                width: 177px;
+                height: 1px;
+                border-top: 1px solid $color-black2;
+                bottom: 5px;
+            }
+
+            .progress-bar-line-1 {
+                left: 28%;
+            }
+
+            .progress-bar-line-2 {
+                right: 25%;
+            }
+        }
+    }
+
+    &__wrapper {
+        display: grid;
+		grid-template-columns: 2fr 1fr 2fr;
+		align-items: center;
     }
 
     &__logo {

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

@@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
 
 /* Colors */
 $color-black: #292929;
+$color-black2: #000000;
 
 $color-white: #fff;