If you want to combine the .profile-tablet classes with media queries in your CSS, the way to apply the rules you provided would be as follows:
@media screen and ( orientation:portrait) {
.profile-tablet .your-target-class {
/* content */
}
.profile-tablet .your-next-target-class {
/* content */
}
}
Basically you define all your CSS classes within the media query itself. The same structure would be applied to the landscape orientation.
I see that you are working on version 5.20.0. Do you use SASS for your styling? If so, you could add an extra file for your .mx-progress and add the media queries there.
Do you have enough information? Let me know if you have any questions.
I don't really get why the orientation is so important. When the orientation changes, the width of the page changes, which can be used to apply different styling using media queries.
I have seen cases where as you suggested the profile-tablet/phone mendix styling messes tings up.
(i personally don't like using the profile-* for responsive styling)