Ankhena

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

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

Картинка это псевдоэлемент.
Он может быть на десктопах вынут из потока и размещен справа абсолютом.

Либо всё это может быть гридом, который перестраивается как нужно.

Дублировать контент тут точно не нужно.

Нужно прочитать про свойство background-size.
И да, убрать размеры из svg.

Верстать mobile-first.
Тогда сначала будет обычный блок и ничего писать не нужно, а при расширении добавлять флекс или грид.
Делается это через @media

Какие используете единицы измерения при верстке?

Подумайте сами, от чего у вас зависит размер блока?
От размера шрифта или от размера родителя?

Это будет и ответ на обе части вопроса: и "какие" и "почему"?

<meta name="viewport" content="width=device-width, initial-scale=1">

забыли

Давайте разбираться.
em - это размер шрифта родительского элемента.
У большинства браузеров шрифт по умолчанию 16px.
Предположим, что для контентного блока задан шрифт 1em и больше никаких правил для шрифта для родительских элементов не было и в браузере не установлен увеличенный или уменьшенный шрифт. Значит, размер шрифта будет 16px.
Мониторы бывают разного размера и с разным разрешением. Например, 13" ноут может быть с разрешением и 1920 и 1280 (не ограничиваясь этими размерами).
Соответственно, 16px будут выглядеть по разному на одном и том же мониторе при смене разрешения.

Вы можете задать размер шрифта (и не только шрифта) в vw. Но на мелких экранах ждет сюрприз: шрифт окажется очень мелким, возможно, даже и вовсе нечитаемым, хоть и будет соответствовать вашему требованию.

Один родитель, 3 ребенка.
У ребенка внутри картинка и текст.
C помощью nth-child и order менять расположение картинки.

Если макет один, только для десктопа, то в точках слома.
Если 3, то когда как. Если проект бюджетный, то как макеты нарисованы, такие и точки. Если не бюджетный, то снова в точках слома.

Флексами: https://jsfiddle.net/srv97kh5/

Заголовок я бы вынесла из блока, но надо смотреть по макету.

И вообще надо ли задавать фиксированную высоту блокам?

Зависит от макета и задумки дизайнера.
В большинстве случаев желательно обходится без указания высоты или задавая минимальную/максимальную.

Но как решить данную проблему?

Если header должен быть именно 100vh, то и размер шрифта пересчитать в единицы измерения связанные с вьюпортом. (Только обязательно проверяйте на больших и маленьких размерах окна, обычно там нужно менять размеры через media, чтобы не получить гигантов и мини-карликов)

Не оттуда пляшете.

Давайте я вам как девочка девочке всё объясню. На примере джинсов.
Есть такая штука мода. Сейчас в обтяжку, раньше клеш или широченные. Но при этом всегда остаются люди предпочитающие классику или консерваторы, которые предпочитают даже слегка устаревшую классику.

Так вот, с сайтами аналогичная история.
10 лет назад считалось, что шрифт 14px это гигантомания и использовали 10 или 12. Между строчками крошечные отступы. Особо нерадивые даже между абзацами пытались не делать пустых строк.

Есть мода и восприятие пользователем современных сайтов. То, как хочется видеть именно сейчас. Изменяются даже пропорции и зависимости.
96 это точно такое же красивое число как 100. Это 16*6. А 16 это стандартный размер шрифта основных браузеров.

Кроме этого есть аспекты адаптивности.
И правильно не ширина кнопки равна 100 или 96px, а ширина кнопки это ширина текста плюс отступы. И хорошо бы, чтобы эти отступы были пропорциональны размеру шрифта, а не кратны 5px. Вы поставите отступ четко 20px, а пользователь поставит в настройках браузера шрифт 150%. И получится куцая кнопка с некрасивыми маленькими отступами.
При этом не все элементы должны быть кратны размеру шрифта, какие-то имеют другие зависимости.

Другой вариант, пропорции относительно размеров экрана или блока. Например, кнопка должна занимать всю ширину блока или половину. Если текст не помещается, то переносится.

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

И да, дизайнер может четко сказать, что справа отступ 19px, а слева 17, потому что визуально (например, из-за особенностей шрифта) получается ровно. Если это проблема для верстальщика, то не надо работать с таким верстальщиком.
Верно и в обратную сторону, если дизайнер нагородил какую-то невменяемую конструкцию из-за которой прибавляется лишняя 1000 строчек кода, то имеет смысл обсудить целесообразность ее использования с самим дизайнером и заказчиком.

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

Решается добавлением пустых блоков в количестве "максимальное количество блоков в строке минус один". Не забудьте у них обнулить высоту, границы, тени и т.д.
https://jsfiddle.net/0c8hb7ka/

(это если надо флексами)

Держите https://jsfiddle.net/Lwhjdkvc/
Просто паддинги были лишними или не к тому месту.

(А семантику старайтесь не нарушать по мере возможностей)

Даже если криворукость дизайнера печалит, но заказ уже взят, деваться некуда, надо делать.
И справедливости ради, не всегда именно дизайнер виноват в том, что макет выглядит именно так. Заказчики часто тоже отжигают.

Как вообще адаптировать такие элементы?

Вариантов несколько, номера не по приоритету.
1. Когда дизайнеры рисуют что-то затейливое, у них также бывает и мнение и о том, как это затейливое должно выглядеть на разных экранах. Т.е. спросить дизайнера.
2. Фон простой в смысле цветов и вы его уже сделали картинкой. Картинку масштабировать пропорционально, для шрифта и полей указывать размеры в vw. Для ретины выдавать свою картинку через media.
3. Аналогично п.2., но фон переделать в SVG.
4. На мелких экранах упрощать графику. Например, фон поделить пополам под наклоном, реализовать с помощью linear-gradient. Скосы у полей на средних размерах оставить (делать трансформом или градиентом), на совсем мелких убрать. Слова логин/пароль задавать как placeholder.

Если еще захотеть чтобы при фокусе обводка была не прямоугольником по инпуту, а на все скошенное поле, то будет вообще красота. Но пока решения как это реализовать в голову приходят только убогие. Либо двойной трансформ либо с участием JS либо несемантичные.

p.s. присоедИниться

pixelperfect как понял только для px

С чего бы это?
Есть макет, для абстрактности на ширину 600 точек, в нем 2 колонки, в ТЗ указано, что блоки занимают по 50%. Ставите эти 50%. На ширине 600 получаете свои 300 необходимые для pixelperfect.

Pixelperfect проверяется на тех размерах, для которых есть макеты.

Не видя макет сложно сказать какие.

В общем случае все очень просто и узнается экспериментально: двигаете размер окна и смотрите в каких точках ломается верстка, их и используете. Причем для разных блоков это могут быть разные точки.