Ankhena

Сделать элемент или псевдоэлемент прозрачным для клика: pointer-events
Через это же свойство можно вернуть обратно для дочерних.

Переверстать гридами.
Например, быстренько как-то так https://jsfiddle.net/d2mnfq7o/
Разумеется, нужно дорабатывать под себя.

Что же вас заставляет в современном мире верстать инлайн-блоками?

1. Если элементов только на одну строку, то
.elem:not(:last-child) {margin-right: NNpx}
либо .elem + .elem {margin-left...}
2. Если строк больше, но элементов известное количество, переписываем предыдущую формулу через nth-child
3. Если строк больше и количество элементов в строке неизвестно, придется использовать идиотский способ с отрицательным margin для контейнера на величину лишних отступов.

Но ведь есть же простой, удобный, логичный gap в гридах и флексах!

есть ли вариант чтобы верстка перестраивалась на больном расширении согласно макета чтобы не пршлось скрывать или показывать объекты?

Да, конечно и даже не один.
Вы совершенно верно в вопросе указали теги флекс и грид. Вот с их помощью.

Флекс
Десктоп: Оборачиваем контентyю часть в div. Родителю задаем флекс. Два элемента встают в ряд.
Мобилки: для контентного div задаем display: contents, после этого он станет как будто прозрачным или как будто его нет.
Ну и дальше с помощью order расставляем элементы в нужном порядке.

Грид
Несколько вариантов.
Первый с такой же оберткой как для флекса.
Второй - все элементы россыпью и просто меняем сетку.

Тесты разных вариантов
https://codepen.io/AnnaSummer/pen/WNBwPyz


Наверняка что-то ещё забыла

Это увлекательная история.
Вот представьте себя на месте браузера.
Что видите в коде:
Картинка должна занять 100% высоты и width auto.
Как будете рисовать высоту, если у родителя картинки высота тоже 100%, у его родителя тоже нет и т.д. до самого верха. От чего считать проценты? Вроде есть какой-то намек из top 0 и bottom 0. Не прямой, конечно, но хоть что-то.
Теперь про ширину: написано нарисуй авто. Размер в атрибуте не задан, но можно посмотреть, что там у файла. И хотелось бы сохранить пропорции.
Следующий этап размышлений о том, что делать с picture. Вроде надо растянуть по содержимому, но у него auto, которым и так сложно решить что делать.

Как рисовать будете? Как догадаетесь что хотел сказать верстальщик, если у браузера нет возможности заглянуть ни к вам в голову ни в макет?

Ну вот FF берет в качестве ширины для picture исходную ширину картинки.

Всё это о том, что когда нет четких инструкций что делать, браузер пытается как-то интерпретировать написанное. Разные браузеры будут делать это по-разному. Причем с течением времени это поведение может меняться.

Как исправить:
Вариант 1 (похуже)
Тег picture тег с особенностями и ещё и часто не известно, будет ли он вообще в разметке или клиенты его потеряют.
Поэтому самое умное, что можно ему задать это display: contents;, чтобы не мешался.
И дальше работать с оберткой. Тут вариантов много. Например, задать пропорции, а картинке object-fit. Правда у FF есть проблемы с aspect-ratio от высоты.

Вариант 2 (получше)
Картинка, по крайней мере в примере, вообще не контентная и её можно убрать в стили (псевдоэлемент и его фон)

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. Зачем вам две кнопки, если они в одном месте в разметке, я не придумала. Меняете текст и стили и всё. Тогда уж логичнее закрывающую засунуть внутрь всего открываемого блока, тогда и не нужно с ней отдельных манипуляций.

Почему рамка не надевается дальше углов?

Потому что 46 это очень много для картинки 50х50. Всяко меньше половины должно быть.
Почитайте что делает border-image-slice.

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

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

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

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

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

Через кастомные и @property
https://css-tricks.com/property/


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

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

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

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

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

Пишите анимации через запятую.
Либо анимируйте разные обертки.

Breeze1,

если вас не затруднит, покажите пожалуйста реализацию с доп оберткой

Кнопку оборачиваете в div. (Лучше бы внутри span, но кнопка интерактивна, так что снаружи).
Задаете диву псевдо
Задаете диву грид типа 98fr 2fr (это не 2% от кнопки, если что) ну или в каких пропорциях хотите.
Этот псевдо будет заменой отступу.
Последнему элементу грид в одну колонку.

p.s. Можно и без псевдо, только гридом.
https://codepen.io/AnnaSummer/pen/gOqPNWz

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

Правильный line-height в верстке удобнее всего выставлять безразмерным коэффициентом. Чтобы дочерние элементы могли нормально его унаследовать
https://learn.javascript.ru/font-size-line-height
css-live.ru/css/metriki-shrifta-line-height-vertic...

Насколько я знаю, Фигма умеет показывать line-height либо в px либо в %.
Соответственно, если ничего не указано, то это px.
Либо можно перейти в Dev режим и посмотреть значения в нём (это если у вас есть доступ к редактированию, если его нет, то Фигма и так покажет в чем он у неё)