.custom-textarea { width: 100%; padding: 10px 12px; border-radius: 10px; margin-top: 10px; &-light { border: 1px solid $green; background-color: white; color: $gray5; } &-dark { border: 1px solid $gray2; background-color: black; color: white; } &::placeholder { color: #a2a2a2; } &:focus { border: 1px solid $green1; outline: none; &::placeholder { color: $green1; } } } @media screen and (min-width: 1441px) { .custom-textarea { font-size: 16px; &::placeholder { font-size: 16px; } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .custom-textarea { font-size: calc(100vw / 110); &::placeholder { font-size: calc(100vw / 110); } } } @media screen and (min-width: 641px) and (max-width: 1007px) { .custom-textarea { font-size: calc(100vw / 40); &::placeholder { font-size: calc(100vw / 40); } } } @media screen and (max-width: 640px) { .custom-textarea { font-size: calc(100vw / 30); &::placeholder { font-size: calc(100vw / 30); } } }