Отображение: None в @media действует глобально

У меня есть 2 основные проблемы, которые я не могу понять.

1) У меня есть скрытая область виджетов, которая должна отображаться только тогда, когда максимальная ширина равна 1338px, и в то же время мой правый виджет должен исчезнуть.

Проблема в том, что когда я добавляю display: none;, чтобы скрыть левый виджет, он остается скрытым, даже когда максимальная ширина достигает 1338px.

В моем @media я установил display:block для max-width: 1338px;

2) Следующая проблема заключается в том, что на левой боковой панели есть фотогалерея, которая должна исчезнуть, когда max-width достигнет 923px.

Но когда я добавляю display:none к @media для max-width: 923px;, он ничего не отображает независимо от ширины экрана. Он ничего не отображает, даже если у меня размер экрана выше 923 пикселей по ширине.

Вот ссылка на образец сайта, над которым я работаю. https://codepen.io/christiangutierrezreyez/pen/aMXpQd?editors=1100

Области, в которых вы можете найти проблемы, находятся в строках CSS. со 169 по 192 И 351. Я закомментировал строку 352, потому что эта строка создает мне проблему.

Прошу прощения за то, что не вырезал области, чтобы было читабельнее. Но я бы не знал, какие разделы вырезать, а какие оставить.

Любая помощь будет принята с благодарностью! И я благодарю вас за ваше время.