From 9508cf89b90193b9b1e951ff137867dee9c1d674 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Sun, 11 Dec 2022 09:02:07 -0300
Subject: [PATCH] feat(Header): add estilo para telas 375px

---
 .../src/arquivos/sass/partials/_header.scss   | 35 +++++++++++++------
 .../src/arquivos/sass/utils/_variaveis.scss   |  3 +-
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 2049899..e7391c3 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -6,6 +6,9 @@
     .container {
         width: auto !important;
         margin: 0 131px;
+        @media (max-width: $checkout375px) {
+            margin: 0 16px;
+        }
     }
     &__wrapper {
         align-items: center;
@@ -19,9 +22,12 @@
             img {
                 height: 37.14px;
                 width: auto;
-                @media (min-width: $checkout2500px){
+                @media (min-width: $checkout2500px) {
                     height: 91.2px;
                 }
+                @media (max-width: $checkout375px) {
+                    height: 33px;
+                }
             }
         }
     }
@@ -30,16 +36,20 @@
         display: flex;
         width: 119px;
         justify-content: space-between;
-        @media (min-width: $checkout2500px){
+        @media (min-width: $checkout2500px) {
             width: 235.28px;
         }
         img {
             width: 12px;
             height: 15px;
-            @media (min-width: $checkout2500px){
+            @media (min-width: $checkout2500px) {
                 width: 29.47px;
                 height: 41.46px;
             }
+            @media (max-width: $checkout375px) {
+                width: 12px;
+                height: 13.33px;
+            }
         }
         span {
             align-items: center;
@@ -52,7 +62,7 @@
             line-height: 16px;
             font-weight: 400;
             color: $color-gray;
-            @media (min-width: $checkout2500px){
+            @media (min-width: $checkout2500px) {
                 font-size: 24px;
                 line-height: 33px;
             }
@@ -68,9 +78,12 @@
 .progress-bar {
     font-family: "Tenor Sans", sans-serif;
     width: 439px;
-    @media (min-width: $checkout2500px){
+    @media (min-width: $checkout2500px) {
         width: 1078px;
     }
+    @media (max-width: $checkout375px) {
+        width: 0;
+    }
     ul {
         list-style-type: none;
         display: flex;
@@ -87,7 +100,7 @@
             line-height: 14px;
             color: #000000;
             width: 39.9103%;
-            @media (min-width: $checkout2500px){
+            @media (min-width: $checkout2500px) {
                 font-size: 24px;
                 line-height: 28px;
                 width: 120%;
@@ -121,7 +134,7 @@
                         justify-content: center;
                         p {
                             margin-bottom: 9px;
-                            @media (min-width: $checkout2500px){
+                            @media (min-width: $checkout2500px) {
                                 margin-bottom: 15px;
                             }
                         }
@@ -145,7 +158,7 @@
                             border: 1px solid #000000;
                             border-radius: 50%;
                             margin-bottom: 0px;
-                            @media (min-width: $checkout2500px){
+                            @media (min-width: $checkout2500px) {
                                 width: 20px;
                                 height: 20px;
                             }
@@ -157,7 +170,7 @@
                             border: none;
                             border-radius: 50%;
                             background-color: #000;
-                            @media (min-width: $checkout2500px){
+                            @media (min-width: $checkout2500px) {
                                 width: 22px;
                                 height: 22px;
                             }
@@ -165,14 +178,14 @@
 
                         .progress-bar-line-1 {
                             left: 25%;
-                            @media (min-width: $checkout2500px){
+                            @media (min-width: $checkout2500px) {
                                 left: 18.9%;
                             }
                         }
 
                         .progress-bar-line-3 {
                             right: 25%;
-                            @media (min-width: $checkout2500px){
+                            @media (min-width: $checkout2500px) {
                                 right: 18%;
                             }
                         }
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index a4020f4..4aeead2 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -38,5 +38,6 @@ $z-index: (
 ) !default;
 
 
-/* media querie 2500 */
+/* media querie */
 $checkout2500px: (2500px);
+$checkout375px: (376px);