diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 08ea459..4485c48 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -19,6 +19,13 @@ line-height: 16px; text-transform: uppercase; + @media (max-width: 1024px) { + font-size: 10px; + line-height: 12px; + font-weight: 400; + margin-right: 16px; + } + &:hover { color: lighen($color-black, 10); } @@ -34,6 +41,10 @@ h3 { margin-bottom: 16px; + @media (max-width: 1024px) { + margin: 38px 0; + } + span { color: $color-black; font-family: "Tenor Sans"; @@ -41,6 +52,11 @@ font-size: 20px; line-height: 23px; text-transform: uppercase; + + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } } small { @@ -50,6 +66,11 @@ font-size: 20px; line-height: 23px; text-transform: uppercase; + + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } } } } @@ -58,6 +79,10 @@ margin: 0 0 16px; width: 54.883%; + @media (max-width: 1024px) { + width: 97% !important; + } + input { position: relative; height: 50px; @@ -99,6 +124,10 @@ top: -1.5%; width: 22.555%; + @media (max-width: 1024px) { + width: 12.762%; + } + @media (max-width: 490px) { height: 48px; margin: 0; @@ -127,6 +156,10 @@ padding: 16px; } + @media (max-width: 1024px) { + width: 30.177%; + } + h3 { color: $color-black; margin: 0 0 8px 0; @@ -151,10 +184,14 @@ } } - i::before { + .icon-lock::before { color: $color-black; font-size: 6rem; opacity: 0.5; + + @media (max-width: 1024px) { + display: none; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 20c3763..78fe3ae 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -87,6 +87,10 @@ body { letter-spacing: 0.05em; text-transform: uppercase; + @media (max-width: 1024px) { + margin: 20px 0 20px 16px; + } + @include mq(md, max) { margin-left: 30px; }