Да, понял, что у вас проблема - повторить градиент. К сожалению, сервисов генерации градиентов по картинке не знаю. Скорее всего придется подбирать градиент на глаз.
Высота наследуется от родителя. Первым идет html, и если его высота не равна 100%, то высоте 100% для body не от чего отталкиваться. Однако в 100% для html и body есть подводные камни и в некоторых случаях они могут откровенно мешать.
tkachenkoaanna097, сетка из задачи заложена в grid-template-areas и в каждом конкретном grid-area. Если следующие блоки не будут размечены в areas, то будут просто идти один за другим. Так это работает.
Если ничего не должно изменяться, ни размер шрифта, ни межбуквенное расстояние, то каким образом текст должен ужаться до ширины контейнера, за счет чего?
1. Если svg лежит в том же домене, то проверить на наличие ошибки 404 в консоли. Если имеется, то маневрировать с путями. Тут вам видней, где и что у вас находится.
2. Если вы тестируете сайт локально, без сервера, то вставка свг через use работать не будет, для этого нужен http.
3. Если свг лежит на другом домене, то надо использовать альтернативные способы подключения спрайта.
А я же описал выше. В силу того, что идентификатор никак не может вводиться и редактироваться пользователем, его вообще не надо понимать. Вставился сам и пусть стоит. Поля ввода для того и нужны, чтобы в них вводить данные. Другое дело, что его можно куда-нибудь вынести\отделить от полей, чтобы вообще там не маячил, но это уже надо смотреть по его значимости в контексте формы.