Какая должна быть ширина фрейма в figma для верстки?

Что-то вопрос в заголовке вообще мимо текста внутри.

Если ширина фрейма 1600, то на 1600 всё должно совпадать с макетом с учетом погрешностей разрешенных по ТЗ.
Почему вы проверяете 1600 на 1920 это загадка.
На самом деле вообще без разницы какой экран у вас.
Сайт должен хорошо смотреться на любом экране при любом размере вьюпорта и любой плотности пикселей.

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

root09 ау?

Как положить по два grid-элемента в каждую ячейку без использования уникальных классов/селекторов?

imko, тогда дичь из первого комментария. (Шепотом: если не вспоминать про доступность)

Как сделать border-radius у filter: drop-shadow?

Подскажите почему карточки перекрывают border-radius у всего блока где они находятся и как такое можно исправить?

В смысле почему? Потому что они не имеют своего border-radius.
Если зададите overflow: hidden, то обрежутся.

Ну и последнему border-bottom-right-radius: 10px;
Удобнее через кастомное свойство, чтобы один раз менять скругление.

Сколько nav`ov может быть на сайте?

Levott, велкам

Сколько nav`ov может быть на сайте?

Levott, картинка никуда никого не переводит. Этим занимаются ссылки <a>
Пожалуйста, используйте теги по назначению, вам будут благодарны и люди с ограниченными возможностями и пользователи клавиатуры, работающие без мыши и даже коллеги.

Сколько nav`ov может быть на сайте?

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

Grid выходит за границы сайта. Что делать?

melodze, осталось починить высоту :)
Гриды хорошие и девтулз тоже :)

Grid выходит за границы сайта. Что делать?

melodze, Вы меня извините, но в вопросе вообще нет слова высота.

Карточки грида в принципе одной высоты, по умолчанию. Обведите li рамочками и убедитесь.
Дальше встает вопрос, зачем все остальные обертки внутри. Их либо удалить либо растягиваться на высоту li.

Ответы, которые могут помочь решить задачу тут принято отмечать решениями.
Это помогает и другим спрашивающим с аналогичными проблемами и другим отвечающим не тратить время на чтение вопроса.

Grid выходит за границы сайта. Что делать?

melodze ау?

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

tostershmoster, ничем и скорее наоборот.
Чтобы болтать туда-сюда при открытии и закрытии.

Как положить по два grid-элемента в каждую ячейку без использования уникальных классов/селекторов?

imko, так
1. Если лейбл не связывается с инпутов по for, то инпут должен лежать внутри лейбла. И тогда не надо их накладывать так сложно.
2. Инпут вообще скрывают для таких дел (доступно, не через dispalay:none). Или я чего-то не поняла в вашей идее? Зачем он там видимый?

Может скринчик того, что нужно в реальности?

p.s. вы же можете представить сколько сил у меня ушло, чтобы промолчать про идею делать табы на инпутах в целом? :)))

Как отпозиционировать элемент относительно декоративного элемента фона?

Если вы уверены в том, что фон и мужик всегда должны иметь одинаковое взаиморасположение, то можно:
1. Слить мужика и фон в одно изображение.
2. Использовать относительные единицы (%, vw) и пропорции.

Я вот не очень уверена в этом.
Либо тогда и тексты и все остальное должно масштабироваться также. Т.е. vw, clamp и т.д.

Очевидная проблема в том, что при расширении экрана, отличимом от макета все сломается.

Сначала нужно описать как оно должно себя вести на самом деле на родном языке. Можно нарисовать.
Т.е. что от чего зависит, как и куда должно или не должно двигаться. К какой точке прибито, если не должно. И т.д.

Либо спросить у дизайнера, если с ним есть связь и это его дело, а не ваше.

Как положить по два grid-элемента в каждую ячейку без использования уникальных классов/селекторов?

Дичь какая-нибудь с чередованием ячеек типа min-content 16px.
Для четных (или у вас там класс) правый отступ на это 16 для визуального отступа и выравнивание justify-self: end, чтобы содержимое вывалилось налево.
Но при этом, конечно, нет никакой гарантии попадания в размер нечетных ячеек, если сразу не был задан размер. Либо определять его js.

А то, что скажу дальше вам, наверное, не понравится.
Напрашивается вывод об ошибке в структуре.

Лучше всего показать истинную задачу, а не вывод из неё, как сейчас.
Тогда, возможно, найдется более гармоничный вариант решения.

Сколько nav`ov может быть на сайте?

Сколько угодно.
Но имея в виду, что это тег предназначенный для основной навигации. Т.е. если меню дублируется, то второе не будет nav.

картинки

Нет там никаких "картинок".
Есть продолжение списка ссылок/кнопок. Просто они не имеют видимого текста, а иконки это их украшения.
Внутри элемента делают доступно скрытый (гуглите visually-hidden) span, а иконку вставляют псевдоэлементом и/или фоном/маской.

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

Поднимите z-index хедеру.
И почитайте про контекст наложения.

Как зафиксировать элемент по отношению к определенной точке фона?

Overlord934, ну и считайте смещение от центра и размер шрифта.

Но мы с вами уже вроде говорили, что проще целой картинкой.

Как зафиксировать элемент по отношению к определенной точке фона?

Без js и при cover - нет.

И куда будет деваться текст, если нужная часть изображения обрежется cover?

Не корректно работает мобильная версия на айфоне, хотя на Андройде все четко, как исправить?

Скорее всего, если вы чинили то, что вываливалось с помощью overflow hidden на body, то теперь придется починить по нормальному.

Если всё не так, то вряд ли вам кто-то скажет что-то умное по скринам, кроме удаляйте по одному или обводите рамочками.

Ну и ещё нюанс: ширина вьюпортов-то какая там и там?

Как это сверстать с учётом мобильной версии?

sharpsss, градиентами https://jsfiddle.net/Ankhena/n5b97ovh/
Старая песочница, придется смотреть через vpn, если вы в России или РБ.
Сейчас расчеты можно упростить за счет кастомных свойств.