Как задать переменные для :root в sass?

В :root пишут кастомные свойства CSS

:root {
  --basewidth: 960px;
}

Писать препроцессорные переменные в root не имеет смысла, в результате будет пусто.

Как сделать такой border-radius нестандартный?

alexalexes В данном случае CSS никак не ограничивает задумку дизайнера.

Serezha, есть: обычный радиальный градиент. Можете поискать по моим ответам и комментариям. За последний месяц я раза пару раз точно отвечала на этот вопрос.

Как сделать пропорциональное уменьшение блока при position: absolute?

1. Песочница нерабочая, картинок не видно, размеры не проставлены.
2. За пропорции отвечает в основном aspect-ratio. (а также хак с паддингами, единицы измерения от вьюпорта или контейнера и т.д.)
3. Нет образца - не понятно, зачем вообще абсолют.

Почему не отображаются иконки font awesome?

Для начала, потому что нарушены правила вложенности тегов. У вас там ссылки снаружи li, должно быть наоборот.
Прогоните код валидатором и исправьте ошибки.

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

Cortez72, общепринятые стандарты есть, но размеров во-первых, всё равно много, а во-вторых, дизайнер не обязан использовать именно такую ширину фрейма.

Какая должна быть ширина фрейма в 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, а иконку вставляют псевдоэлементом и/или фоном/маской.