.mobile-birthdate { width: 100%; height: 45px; border-radius: 10px; padding: 10px 10px; border: 1px solid #ccc; margin: 10px 0px; label { width: fit-content; font-family: numeralLight; } span { color: #bfbfbf; } input { border: 0px; background-color: white; font-family: numeralLight; color: #4d4d4d; width: 42px; text-align: center; direction: ltr; &:focus { outline: 0px; } &::placeholder { color: #bfbfbf; } } @media screen and (max-width: 1000px) { span { font-size: 14px; } input { font-size: 14px; &::placeholder { font-size: 15px; } } } @media screen and (max-width: 550px) { span { font-size: calc(100vw / 30); } input { font-size: calc(100vw / 26); &::placeholder { font-size: calc(100vw / 30); } } } } .birthdate { width: 100%; height: 55px; border-radius: 10px; padding: 10px 10px; border: 1px solid #ccc; margin: 10px 0px; label { width: fit-content; font-family: numeralLight; } span { color: #bfbfbf; } input { border: 0px; background-color: white; font-family: numeralLight; color: #4d4d4d; width: 42px; text-align: center; direction: ltr; &:focus { outline: 0px; } &::placeholder { color: #bfbfbf; } } }