Ankhena

1. Совсем банальный: вешайте класс на родительский блок.

2. Через :has

.catalog__info:has(.catalog-filter.active)  .catalog__wrapper {
    margin-bottom: 50px;
}

.catalog__info:has(.catalog-filter.active)  .catalog__btn {
    display: none;
}

3. Самый интересный: с помощью кастомных свойств.

.catalog-filter {
  --open-btn-display: block;
  --margin: 0;
}

.catalog-filter.active {
  --open-btn-display: none;
  --margin: 50px;
}

.catalog__wrapper {
  margin-bottom: var(--margin);
}

.catalog__btn {
  display: var(--open-btn-display);
}

p.s. Зачем вам две кнопки, если они в одном месте в разметке, я не придумала. Меняете текст и стили и всё. Тогда уж логичнее закрывающую засунуть внутрь всего открываемого блока, тогда и не нужно с ней отдельных манипуляций.

Хорошо, конечно, что вы уверены, что высота точно 60. Что вас не волнует никакое переполнение шапки ни по какой из причин (увеличенный шрифт у пользователя, отвалился дизайнерский шрифт, использование переводчиков и другие банальные причины)
Если так, то да, calc и вперед.

Разумнее, задать родителю высоту 100vh и грид. В котором первой строке задан min-content, а для main 1fr, т.е. все оставшееся пространство.
grid-template-rows: min-content 1fr
Аналогично можно сделать и флексом и flex-grow для main.

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

Могу ответить и на вопрос где это написано. Вот тут, прямо в спеке.
А также попробую перевести, что там написано.

Там идет речь о том, что комментарии можно оборачивать в article, когда они являются дочерними элементами "большого" article. Т.е. той самой независимой конструкцией является внешний article, сама статья.
И тогда всё логично, сама статья, вместе с комментариями к ней (если нужно) может быть использована где угодно, в том числе и на других сайтах без потери контекста.

Не ясно зачем и чем это лучше clip-path и svg, но пусть будет.
Дальше доводите до ума, чтоб ничего не торчало

https://codepen.io/AnnaSummer/pen/GReWpPy

Нужно сделать так называемый стек из svg, а не символьный спрайт.
И его можно вставлять куда угодно, как обычно в use или в img или в CSS (псевдо, фоны, маски...).
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

Если вы имеете в виду вставку непосредственно в свойство content псевдоэлемента, то да, тоже можно, но прямо скажем неудобно потом с этим работать. Но это верно и для всего остального, отличного от текста.

Используйте относительное позиционирование. Оно сдвинет элемент относительно текущего положения, не повлияв на окружение.
https://developer.mozilla.org/ru/docs/Learn/CSS/CS...

Если вы меняете картинку, то используйте специально для этого придуманный тег picture

Атрибут title не стилизуется.
Можно сделать псевдо content: attr(title). Но перенос будет только за счет ширины.
Либо использовать обычный div или span или p с br и стилизовать как душе угодно.

https://jsfiddle.net/Ankhena/n067dbg9/

Давайте расскажу, что вы делаете:
Грид на 2 равных столбца - ок.
Зачем-то у него отрицательные margin.
Ещё зачем-то он флекс на другой ширине. Почему бы ему не быть гридом всегда и без отриц отступов?
Дальше карточке задана ширина 320.
Но проверяете на ширине 469.
Было бы странно, если бы оно влезло.
Что происходит дальше?
Дальше вы решаете, что 320 тут лишние и убираете их.
Что остается?
Остается width: 50%.

Получаем карточку на половину ячейки грида.

Что делать?
Я бы избавилась от:
- флексов (не нужно будет задавать ширину карточкам)
- отрицательных margin
- ширины карточек (пусть грид определяет ширину карточки)

Также можно попробовать добавить в грид minmax и уменьшить количество media.

Если что, всё это написано в инструментах разработчика, хорошо видно какие свойства в итоге применились.

Перевожу на русский: в кнопке должен быть текст. Доступный для всех технологий, в том числе для скринридеров.
Если визуально в кнопке его нет, то используется доступно скрытый текст. Гуглите паттерн visually-hidden.
Ну или хотя бы атрибут aria-label.

Не работает, потому что вы в backgroung-image кроме картинки понаписали ещё кучу всего.
Пишите либо всё в сокращенное свойство либо всё по отдельности. А не кашей, как сейчас.

При такой структуре разметки вам не нужен для этого JS.

Поменяйте id="info_block" на class="info_block" и добавьте css

.info_block {
  disply: none;
}
.open_link:hover + .info_block {
  disply: block
}

Правда, лучше немножечко видоизменить, чтобы наведение было на общего родителя.

Для .container задан flex. Значит, задавать для .block inline-block - бесполезно, потому что будет всё равно блок (если мы не будем сейчас думать о "на всякий случай").
Но уже внутри .block есть дочерний элемент .block-item тоже имеющий inline-block.
А после них браузер делает "пробел". И то, что вы видите красное - это он и есть.

Как лучше чинить зависит от макета, вашей схемы недостаточно. Ну разве что банальные советы поменять на флекс или обычный блок или разобраться с vertical-align.

<h1 class="main-title">
      мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br>
      достижения
</h1>

А, поскольку, это скорее украшение строки, а нормальный логотип уже есть наверху слева, то нет смысла его дублировать как img и можно сократить до:

<h1 class="main-title">
     <span class="main-title__beautiful-string">мои </span>
      достижения
</h1>

.main-title__beautiful-string {
  display: block;
}

.main-title__beautiful-string::after {
  content: "";
  display: inline-block;
  vartical-align: middle;
  bg: иконка
}

Либо флексом.

Лень компилировать всё это в мозгу. На будущее, делайте песочницы с видимой проблемой на codepen.io.

Но вы же переопределили transform.
Пока scale(0) он по центру, потому что есть translate, а при scale(1) никакого translate уже нет.

Что имеет смысл сделать:
1. Большинство современных браузеров позволяет стилизовать радио и чекбоксы с помощью appearance, без вот этой дичи со спанами.
2. Если всё таки спан, то для серого фона нет смысла делать псевдо, можно покрасить сам span.
3. + лучше делать фоном (или маской), а не в content, будет легче управлять. Опять же, шрифт в content может сбивать центрирование, потому что так нарисован символ.
4. after не вешать абсолютом, а разместить в центр, например, флексом.
5. Либо вообще не делать after, а регулировать bg size (mask size) для появления крестика.

Итого: можно сократить огромный кусок мусора, избавиться от трансформаций и абсолюта.

Браузер не умеет работать с scss.
Ваш код сначала нужно скомпилировать в css.
Посмотрите в сторону Gulp (для верстки за глаза).

Также можно заменить препроцессорные переменные на кастомные свойства css. Но их работа различается.

но у svg в коде есть определенная ширина и из-за этого картинка становиться или в левый или в правый край

Ну не из-за этого, а из-за того, что по умолчанию, svg не меняет пропорции.
Но это меняется с помощью атрибута preserveAspectRatio

Плейсхолдер забыли
Чтобы срабатывал :placeholder-shown (и в сочетании с :not) он должен быть.

https://codepen.io/AnnaSummer/pen/xxYygyK

Добавляйте что-нибудь типа font-variation-settings: 'wght' 1000, 'CONT' 1000