Try adding a container around that and applying that class to the container rather than the text label. Otherwise you should be targeting the form-text (something like that)class for overwrite in css .
If you copy that class declaration directly to .main.scss, does it work?
If so, you may not be importing the custom-styles file correctly to main.
That said, I've applied your class to a text inside the Atlas bar and it is working for me (see image below). But you can also inspect it on the browser to check if the class is showing and if so, if it's not being overwritten.
As for media queries, please check the following documentation:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries.asp
https://css-tricks.com/approaches-media-queries-sass/
Hope this helps