feat: Criação CSS do Header

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

@@ -1,22 +1,127 @@
 /* _header.scss */
 .headerCheckout {
     .container {
-        width: auto !important;
+        width: 79.53125%;
+        height: 96px;
+        display: flex;
+        align-items: center;
     }
     &__wrapper {
+        width: 100%;
         align-items: center;
         display: flex;
         justify-content: space-between;
+
+        #progressBar {
+            width: 43.1237%;
+            position: relative;
+        }
+
+        .ProgressBar {
+            width: 100%;
+            display: grid;
+            grid-template-columns: 1fr max-content 1fr;
+            margin: 0;
+
+            &::after {
+                content: "";
+                position: absolute;
+                width: 80%;
+                height: 1px;
+                background-color: #000000;
+                top: 29px;
+                left: 51%;
+                transform: translate(-50%, -50%);
+                z-index: -1;
+
+                @media (min-width: 1140px) {
+                    width: 82%;
+                }
+
+                @media (min-width: 1270px) {
+                    width: 84%;
+                }
+
+                @media (min-width: 1440px) {
+                    width: 87%;
+                }
+
+                @media (min-width: 1810px) {
+                    width: 89%;
+                }
+
+                @media (min-width: 2160px) {
+                    width: 91%;
+                }
+
+                @media (min-width: 2880px) {
+                    width: 93%;
+                }
+
+                @media (min-width: 3510px) {
+                    width: 95%;
+                }
+            }
+            .ProgressBar-step {
+                list-style: none;
+                position: relative;
+
+                &:first-child::after {
+                    content: none;
+                }
+
+                span {
+                    display: grid;
+                    grid-template-areas:
+                        "texto"
+                        "dot";
+                    width: max-content;
+                    white-space: nowrap;
+                    font-family: "Tenor Sans";
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 14px;
+
+                    &::before {
+                        grid-area: dot;
+                        justify-self: center;
+                        content: "";
+                        width: 12px;
+                        height: 12px;
+                        border: 1px solid #000000;
+                        border-radius: 100%;
+                        display: block;
+                        background-color: #ffffff;
+                        margin-top: 9px;
+                        box-sizing: border-box;
+                    }
+                }
+
+                .active {
+                    &::before {
+                        background-color: #000000;
+                    }
+                }
+            }
+
+            .stepThree {
+                justify-self: end;
+            }
+        }
     }
 
     &__logo {
+        width: 155.58px;
         img {
-            height: 52px;
-            width: auto;
+            height: 37.14px;
+            width: 100%;
         }
     }
 
     &__safeBuy {
+        display: flex;
+        align-items: center;
         span {
             align-items: center;
             display: flex;
@@ -26,10 +131,12 @@
             font-weight: normal;
             font-size: 12px;
             line-height: 14px;
-            color: $color-gray;
+            color: $color-black;
         }
 
-        i {
+        img {
+            height: 15px;
+
             margin-right: 8px;
         }
     }