Styling Classes inheriting upward

I’m really struggling with responsive design elements. I watched the videos on style class inheritance but couldn’t find the answer to my problem.

Problem: When I try to add a different style to elements on smaller screens, the style class is inherited upwards.

I’ve tried two approaches:

  1. Deleting the style class from the larger screen and adding a brand new one for the smaller screen (tablet vs desktop for example). When I do that the new style class is added to the larger screen as well as all the smaller ones.

  2. Adding a combination style class to the smaller screens. When I do this the combination style class is also added to the larger screens.

How can I prevent this?

Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)