Ankhena

Дорабатывайте под себя
https://codepen.io/AnnaSummer/pen/BaGoKrE
Альтернативы: маски, clip-path, svg

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

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

Альтернативный вариант с использованием mix-blend-mode, но нужно подбирать цвета и эффекты

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

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

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

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

Zeplin

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

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

Пройдите игру по гридам https://cssgridgarden.com/#ru
Очень помогает, в том числе и с вашим вопросом.
Дел на полчаса, а результат в голове очень заметный.

И пример аналогичной раскладки
https://codepen.io/AnnaSummer/pen/vYryQvo

Вообще-то они одинаковые :)
НО у инлайновых элементов вертикальные паддинги ведут себя не так, как у блочных.
Если вы зададите побольше отступы у body или как-то еще отодвинете ссылку от верхнего края браузера, то увидите свои два одинаковых паддинга.

Либо вовсе убрать класс container и оставить только menu

Вы же на кнопку повесили transition, а на svg - нет. С чего бы им изменяться одновременно и одинаково?

1. Нет смысла вешать all, если изменяется одно свойство, его и указывайте.
2. div не может быть дочерним элементом button, лучше заменить на span.

Вам дизайнер в каждый пункт меню специально положил по прямоугольничку. Который показывает ширину каждой ссылки. И их ширина на удивление одинаковая. И отступы между элементами тоже одинаковые.

А вы его небрежным обзываете. Ну как так?

Во-первых, потому что нет элемента с классом big в разметке.
Во-вторых, потому что в значениях свойства grid-row слово row не участвует. Только числа или span.
В вашем случае там должно быть написано span 2 или 5/7

Задайте z-index: 0 для fancybox-inner

Сначала нужно сделать так, чтобы card-body стали одинаковой высоты.
А то отступ auto вы задали, только чтобы его применить в блоке нет свободного места.
Либо вообще удалить эту обертку, если макет позволяет.

И эту card-body тоже. Тогда хоть флекс для courses__blc перестанет быть бессмысленным.

Если тяжело работать с инструментами разработчика, можно обводить блоки рамочками. Так будет понятнее, что у вас вообще происходит.

Давайте начнем сначала: на вашем скине нет ни одного тега img.
Ни одна из картинок не является контентной.
Их всех хорошо бы убрать в стили, фоном или фоном псевдоэлементов.

Ну и тогда ваш вопрос отпадет сам собой: текст всегда поверх фона.

Флексы или гриды как раз так и делают

Обычная разметка:
nav
в нем ссылка с лого и список с меню.

Логотип прибиваете абсолютом или лучше гридами по центру.
Список делаете тоже гридами или флексами.
Если флексами, то на случай переполнения пишете правила для nth-child.
Гридами и так нормально всё встанет.

Всё.

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

Если это фон: background-size
Если img, то object-fit

Как правильно вставлять большие изображения на страницу?

Уменьшить до нужного размера. Понятно, что при адаптиве картинки все равно не будут равны размерам блока, но постараться использовать разумные размеры.
И соответственно, для ретины и разных размеров вьюпорта, либо тег picture для контентных либо media для фоновых.

Уберите вот эту bottom: 0; дичь у *

* {
    margin: 0;
    padding: 0;
    bottom: 0;
}