Ankhena

Моя задача растянуть фон на всю ширину body даже при скролле

указывал для фона и 100% и 100vh

vh вообще не имеют отношения к ширине.

Если всё таки речь про высоту, то 100vh очевидно не поможет, потому что это размер вьюпорта, а не контента body.
А вот 100% поможет. И cover тоже поможет.
Но для этого, body не должно быть ограничено вьюпортом или чем-то ещё.
Обычно для body задают min-height: 100vh или развлекаются с процентами от html. Но это делают для эффекта липкого футера.

Самое интересное, что по умолчанию body как раз таки растягивается по высоту контента. И соответственно, фон со 100% или cover поступит аналогично (если он не svg, у svg ещё нужно разрешить изменять пропорции).
Так что ищите где перемудрили.

Запятую уберите между цветом и градиентом. Цвет всегда только у нижнего фона.

Альтернативы:
1. Сделайте сразу фиолетовый градиент.
2. Либо множественным фоном, вниз градиент из фио в фио, поверх тот ваш.

background:  linear-gradient(323deg, rgba(255, 255, 255, 0) 0%, #fff 46.42%, #fff 54.38%, rgba(255, 255, 255, 0) 100%), 
                      linear-gradient(#5F4DD3, #5F4DD3);

Сделайте свою копию проекта и в ней будет возможность редактирования

Сначала нужно узнать, зачем для этого два элемента div и button. Достаточно одной кнопки. Если что, у неё есть два псевдо. В вашем случае не видно зачем второй псевдо.

Но в современном мире эта задача легко решается вообще без псевдо с помощью background-origin
https://sitist.ru/gradient-border.html

Есть.

Практически все способы вставки svg в html не позволяют менять цвет при помощи css.

При вставке в разметку вообще нет проблем менять цвет.

fill: red;
stroke: green;

и т.д.
Альтернативный вариант, а разметке задаем в заливку или обводку currentColor, в CSS меняем свойство color.

Ещё один - использование кастомных свойств.

При вставке прямо в CSS
Маски и фильтры.

mask: url(img.svg) no-repeat center / contain;
  background: red;
  
  &:hover {
    background: green;
  }

Один из вариантов - инлайнить SVG прямо в CSS (в кастомные свойства, чтобы не мусорить в селекторах).
Другой вариант - собираем стек из SVG и используем в url в маске.

Собственно, стеки можно использовать где угодно, в отличие от устаревшего спрайта.
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

https://excalidraw.com/

Очень интересный код.
Ссылки на нужные разделы потеряны, а зато зачем-то картинки в разметке.

<ul class="header__nav">
    <li class="nav__item">
      <a class="nav__link nav__link--favorites" href="">
        <span class="visually-hidden">Избранное</span>
      </a>
    </li>
    <li class="nav__item">
      <a class="nav__link nav__link--profile" href="">
        <span class="visually-hidden">Профиль</span>
      </a>
    </li>
    <li class="nav__item">
      <a class="nav__link nav__link--card" href="">
        <span class="visually-hidden">Корзина</span>
      </a>
    </li>
</ul>

.header__nav {
  display: flex;
  gap: 42px;
}

 .nav__link {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: rgb(246, 246, 246);
}

/* доступно скрываем текст */
.visually-hidden {
  position: fixed;
  transform: scale(0);
}

И в модификаторы пишете фоны для модификаторов ссылок. Или для их псевдоэлементов, как удобнее.

Если с псевдо, то либо делаем их инлайн-блочными и vertical-align: top; и дописываем сcылкам

align-content: center;
text-align: center;

либо ссылки делаем флексами и стандартно

display: flex;
  align-items: center;
  justify-content: center;

https://jsfiddle.net/wav1q8kr/

display: flex;
flex-direction: column;
flex-wrap: wrap;

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

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

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

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

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

Открыть вкладку Event Listeners и посмотреть.

Обратите внимание на галочку Ancestors - она покажет или скроет родительские события.

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

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

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

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

id - уникален, т.е. по id можно обратиться только к конкретному элементу.
class - можно обратиться ко всем элементам с таким классом. Но обычно на классы завязана стилизация, они могут быть переименованы, удалены и т.д.
data-атрибуты - мне нравится этот вариант. Можно поставить нужным элементам сколько угодно раз, можно задать разные data-атрибуты, можно ими свободно манипулировать. Отделены от стилизации. Хотя, конечно, можно стилизовать и по ним, но меньше вероятность, что будут удалены из разметки верстальщиком.

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

В каком смысле "необходимо"?
Но вообще, уже много лет есть замена шрифту - это символьные svg спрайты.
А теперь и стеки из svg, которые работают откуда хочешь. И из разметки и из стилей.

Мне ещё симпатичен вариант использования иконок в кастомных свойствах css. А дальше bg или маски.

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

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