Ankhena

Добавляете класс при открытии и ему добавляете анимацию. Но только тех свойств, которые вообще анимируются. Свойство display не анимируется.
https://jsfiddle.net/46rg1wyb/

Координаты окну задайте.
top: 0 или сколько вам нужно

box-sizing: border-box

Смещайте их абсолютом, а не трансформом. Абсолют рассчитывает координаты от родителя, значит, заданные в % (или, возможно, еще с calc или обратным трансформом на половину ширины, если размер самих элементов не меняется) будут изменяться вместе с размерами родителя.

Если в какой-то момент нужно совсем все перестроить, то, как обычно @media

Еще совсем простой вариант: вместо кучи div использовать одну svg в фоне.

Нет, конечно.
Это делается одним элементом.
Фон и скругления задаются в CSS

.icon {
display: block; /*или другой по обстоятельствам*/
width: 30px;
height: 30px;
border-radius: 10px;
background-color: blue; /*цвет фона*/
background-image: url(путь к картинке);
background-position: center;
background-repeat: no-repeat;
background-size: нужный-размер;
}

Если картинке нужно менять цвет при разных состояниях, то её вставляют как инлайн SVG (желательно спрайтом).

1. SVG
2. conical gradient, но на данный момент нет поддержке в не вебкитах.
3. 2 псевдоэлемента. На одном дуга в четверть круга, второй перекрывает честь этой дуги.

Мне больше всего нравится последний вариант.
https://jsfiddle.net/zquwg2sy/

Так https://jsfiddle.net/tg3nqoef/

Я вам еще вчера написала ответ в комментариях.

Проверяйте тут не 100%

Либо неправильно написаны селекторы.
Покажете код в песочнице или ссылку на сайт, станет понятнее.

Разберитесь с селекторами.
Да и с семантикой тоже.

Вложенные селекторы:
a:hover span {красный}
Применит стили ко всем span, которые находятся внутри ссылки, когда на нее навели мышкой.

Итого:
.menu-link:hover .icon {меняйте что хотите}

Вот так, без лишних спанов и дивов для стрелок: https://jsfiddle.net/6k8qf35y/

Вероятно в том, что для работы внешних спрайтов в некоторых браузерах нужен сервер, хотя бы локлхост.
Либо забыли файлик svgxuse

Не переопределяйте свойства, которые не изменяются.
Зачем вы задаете флекс 2 раза (боюсь даже, что не 2), если блок как был флексовым, так и остался? С остальными свойствами аналогично.
Т.е. в примере со скрина вторая группа медиа вообще не нужна, потому что не поменялось вообще ничего.

Вспомните неравенства в школе. Тут тоже самое.
Ширина окна 300 попадает в оба условия. Соответственно, и стили применяются и те и те.
Браузер как будто бы игнорирует скобки медиа и высчитывает специфичность как обычно.

Почему тогда я могу спокойно передвинуть label? И textarea, и label находятся внутри одного элемента и оба являются строчными. В чем тогда разница?

Разница в том, что у label есть куда выравниваться в рамках строки, а у textarea нету, потому что именно он определяет высоту этой строки.
Разобраться вам поможет вот эта статья https://web-standards.ru/articles/vertical-align/

transform skew, border-radius, градиент и z-index -1 для псевдоэлемента.
Как-то так https://jsfiddle.net/mwp2efx0/

Проще всего: https://jsfiddle.net/58qdn06e/
Если объясните зачем там нужен псевдо - обсудим.

Фильтрами https://developer.mozilla.org/ru/docs/Web/CSS/filter

У вас

.blog-action .blog_inner .item {
    width: 41%;
}

а в медиа
.blog .item

Специфичность в первом случае выше и они перебивают всё остальное.

Почитайте про нейминг БЭМ.
Избегайте вложенности селекторов (больше 2 требуется очень редко, а БЭМ и вовсе без вложенности).

swiper