Ankhena

Не ясно зачем и чем это лучше 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

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;
}

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

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

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

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

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

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

Для .container задан flex. Значит, задавать для .block inline-block - бесполезно, потому что будет всё равно блок (если мы не будем сейчас думать о "на всякий случай").
Но уже внутри .block есть дочерний элемент .block-item тоже имеющий inline-block.
А после них браузер делает "пробел". И то, что вы видите красное - это он и есть.

Как лучше чинить зависит от макета, вашей схемы недостаточно. Ну разве что банальные советы поменять на флекс или обычный блок или разобраться с vertical-align.

Нужно провести вертикальные линии по скрину. И выяснить, что колонок должно быть 3, а не 2.

1. clip-path
2. убрать маску у картинки, наложить поверх и фона и канваса.

Почитайте про unicode-range, браузер сам разберется.
Краткая суть такая: если на странице нет символов из указанного диапазона, то шрифт не загружается. Если же есть хоть один символ, то загрузится весь шрифт.

https://developer.mozilla.org/en-US/docs/Web/CSS/@...