Ankhena

Хорошо, конечно, что вы уверены, что высота точно 60. Что вас не волнует никакое переполнение шапки ни по какой из причин (увеличенный шрифт у пользователя, отвалился дизайнерский шрифт, использование переводчиков и другие банальные причины)
Если так, то да, calc и вперед.

Разумнее, задать родителю высоту 100vh и грид. В котором первой строке задан min-content, а для main 1fr, т.е. все оставшееся пространство.
grid-template-rows: min-content 1fr
Аналогично можно сделать и флексом и flex-grow для main.

Так получится универсальное решение, не зависящее от высоты шапки.

Вообще в одну строчку

[...document.querySelectorAll('input[type="checkbox"]')].forEach(item => item.checked = true);

Либо перечисляете классы через запятую

querySelectorAll('.myCheckBox1, .myCheckBox2, .myCheckBox3')

Могу ответить и на вопрос где это написано. Вот тут, прямо в спеке.
А также попробую перевести, что там написано.

Там идет речь о том, что комментарии можно оборачивать в article, когда они являются дочерними элементами "большого" article. Т.е. той самой независимой конструкцией является внешний article, сама статья.
И тогда всё логично, сама статья, вместе с комментариями к ней (если нужно) может быть использована где угодно, в том числе и на других сайтах без потери контекста.

Не ясно зачем и чем это лучше clip-path и svg, но пусть будет.
Дальше доводите до ума, чтоб ничего не торчало

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

Через кастомные и @property
https://css-tricks.com/property/


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

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

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

Используйте относительное позиционирование. Оно сдвинет элемент относительно текущего положения, не повлияв на окружение.
https://developer.mozilla.org/ru/docs/Learn/CSS/CS...

Если вы меняете картинку, то используйте специально для этого придуманный тег picture

Пишите анимации через запятую.
Либо анимируйте разные обертки.

Breeze1,

если вас не затруднит, покажите пожалуйста реализацию с доп оберткой

Кнопку оборачиваете в div. (Лучше бы внутри span, но кнопка интерактивна, так что снаружи).
Задаете диву псевдо
Задаете диву грид типа 98fr 2fr (это не 2% от кнопки, если что) ну или в каких пропорциях хотите.
Этот псевдо будет заменой отступу.
Последнему элементу грид в одну колонку.

p.s. Можно и без псевдо, только гридом.
https://codepen.io/AnnaSummer/pen/gOqPNWz

Например, так

$md: 720px;
@mixin _md {
  @media (min-width: $md) {
    @content;
  }
}

.block {
  color: red;

  @include _md {
    color: blue
  }
}

Атрибут title не стилизуется.
Можно сделать псевдо content: attr(title). Но перенос будет только за счет ширины.
Либо использовать обычный div или span или p с br и стилизовать как душе угодно.

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

Правильный line-height в верстке удобнее всего выставлять безразмерным коэффициентом. Чтобы дочерние элементы могли нормально его унаследовать
https://learn.javascript.ru/font-size-line-height
css-live.ru/css/metriki-shrifta-line-height-vertic...

Насколько я знаю, Фигма умеет показывать line-height либо в px либо в %.
Соответственно, если ничего не указано, то это px.
Либо можно перейти в Dev режим и посмотреть значения в нём (это если у вас есть доступ к редактированию, если его нет, то Фигма и так покажет в чем он у неё)

Давайте расскажу, что вы делаете:
Грид на 2 равных столбца - ок.
Зачем-то у него отрицательные margin.
Ещё зачем-то он флекс на другой ширине. Почему бы ему не быть гридом всегда и без отриц отступов?
Дальше карточке задана ширина 320.
Но проверяете на ширине 469.
Было бы странно, если бы оно влезло.
Что происходит дальше?
Дальше вы решаете, что 320 тут лишние и убираете их.
Что остается?
Остается width: 50%.

Получаем карточку на половину ячейки грида.

Что делать?
Я бы избавилась от:
- флексов (не нужно будет задавать ширину карточкам)
- отрицательных margin
- ширины карточек (пусть грид определяет ширину карточки)

Также можно попробовать добавить в грид minmax и уменьшить количество media.

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

Обычным радиальным градиентом
(из России открывать с vpn)
https://jsfiddle.net/Ankhena/wkdfngyu/
https://jsfiddle.net/Ankhena/wj102v8e/2/

Грид на 6 колонок.
Все элементы занимают по 2 колонки.

А дальше строить логику на :nth-child
https://css-live.ru/articles/resheno-s-pomoshhyu-c...

Если последний элемент одновременно и второй из трех, то путь занимает 3 колонки
:nth-child(3n+2):last-child {grid-column: span 3}
Аналогично для второго с конца и одновременно первого из трех.
И для последнего с конца и одновременно первого из трех задать 6 колонок.

Либо в одну строчку на флексах :)

.text {
    width: min-content;
    min-width: 100%;
    box-sizing: border-box;
}

или так

.text {
    width: min-content;
    min-width: fit-content;
    box-sizing: border-box;
}

из вопроса не понятно как должен себя вести блок при недополнении.