Первые медиа-запросы для мобильных устройств: есть ли способ «охватить» стили (в отношении классов видимости)?

Я разрабатываю страницу с использованием мультимедийных запросов CSS3, используя первый подход для мобильных устройств, что означает, что я начинаю с малого и работаю.

Но теперь я столкнулся с проблемой: как бороться с "стильным кровотечением" для классов видимости?
Позвольте мне объяснить, что я имею в виду - когда мой первый медиа-запрос выглядит так:

@media only screen and (min-width: 20em) {
    // Styles here
}

Эти стили не применяются к экранам размером менее 20 мкм. На самом деле это не проблема, потому что стили, которые не обернуты в медиа-запросе, в основном являются первым медиа-запросом (надеюсь, вы понимаете, что я имею в виду).

Но теперь я хочу ввести классы видимости, чтобы скрыть элементы для определенных размеров экрана. Проблема в том, что эти стили в основном унаследованы. Видеть:

@media only screen and (min-width: 20em) {
    .hidden-first {
        display: none;
    }
}

Любой элемент со hidden-first классом hidden-first как только экран будет шириной 20 или более ширины. Но я хочу только скрыть элемент, пока активен медиа-запрос.

Как мне это сделать - есть ли способ сбросить стиль внутри другого медиа-запроса?