.auth { &__wrapper { background: #ffffff; border-radius: 12px; padding: 50px 0 35px 56px; margin-top: 40px; display: flex; @media (max-width: 1400px) { margin-top: 100px; } @media (max-width: 900px) { flex-direction: column-reverse; padding: 20px; margin-top: 100px; } } &__info { margin-right: 115px; @media (max-width: 900px) { order: 3; flex-direction: column; margin-bottom: 20px; } h3 { font-weight: 500; font-size: 30px; line-height: 32px; margin-bottom: 20px; text-align: center; } p { max-width: 310px; margin-top: 17px; font-weight: 400; font-size: 16px; line-height: 30px; @media (max-width: 900px) { max-width: none; margin: 15px 25px; } @media (max-width: 600px) { font-size: 14px; line-height: 22px; } } @media (max-width: 900px) { margin-right: 0; display: flex; align-items: center; } } &__form { display: flex; flex-direction: column; input { margin-bottom: 30px; background: #eff2f7; border-radius: 8px; min-width: 300px; width: 100%; padding: 8px 12px; border: none; outline: none; font-weight: 400; font-size: 15px; line-height: 18px; @media (max-width: 900px) { max-width: 550px; } } label { margin-bottom: 15px; font-weight: 400; font-size: 15px; line-height: 18px; color: #000000; } button { background: #52b709; border-radius: 44px; max-width: 130px; width: 100%; border: none; font-weight: 500; font-size: 18px; line-height: 32px; color: white; height: 45px; } &__buttons { display: flex; column-gap: 20px; align-items: center; span { cursor: pointer; text-decoration-line: underline; font-size: 13px; font-weight: 500; } } @media (max-width: 900px) { order: 2; } } &__img { position: absolute; right: 48px; top: -90px; @media (max-width: 900px) { order: 1; position: inherit; right: inherit; top: inherit; max-width: 115px; margin-bottom: 35px; } } }