Ankhena

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

Там идет речь о том, что комментарии можно оборачивать в 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;
}

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

Перевожу на русский: в кнопке должен быть текст. Доступный для всех технологий, в том числе для скринридеров.
Если визуально в кнопке его нет, то используется доступно скрытый текст. Гуглите паттерн visually-hidden.
Ну или хотя бы атрибут aria-label.

Не работает, потому что вы в backgroung-image кроме картинки понаписали ещё кучу всего.
Пишите либо всё в сокращенное свойство либо всё по отдельности. А не кашей, как сейчас.

При такой структуре разметки вам не нужен для этого JS.

Поменяйте id="info_block" на class="info_block" и добавьте css

.info_block {
  disply: none;
}
.open_link:hover + .info_block {
  disply: block
}

Правда, лучше немножечко видоизменить, чтобы наведение было на общего родителя.