Ankhena

Задать align-items: flex-start
или align-self

Потому что 210px + 65% при разной ширине окна дадут разный результат. Где-то псевдо не дотянет до конца родителя, а где-то вылезет.

Просто используйте флексы для h2 вместо абсолюта для псевдо.
https://jsfiddle.net/5c1punm4/

min-content
grid-template-columns: min-content repeat(3, 1fr);
https://jsfiddle.net/y20vnap1/

Так задайте отступ на размер тени.

Как-то так https://jsfiddle.net/oyz0jhLr/

Потому что вы забыли & перед :hover

&:hover {}

Если ширина зависит от размера корневого шрифта, то да. Если нет, то нет. Вроде очевидно.
Высоту вообще не стоит задавать, используйте отступы.
И вот это Какие используете единицы измерения при верстке?

Пробел лишний между url и скобкой.
Вы могли сами воспользоваться валидатором

Также как и картинки любого другого размера.
Теги figure и figcaption придуманы как раз для этого.

Для расположения блоков в ряд очень удобно использовать display flex.

Не очень понятно, что вы имеете в виду.

Каждой секции можно задать свое изображение.

Также можно задать несколько фонов для одного блока.
Они пишутся через запятую.
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Поверх кнопки прозрачный инпут чекбокс.

Не поверх только, а перед ней и доступно скрытый (visually-hidden)
И дальше через :checked + label или label снаружи и тогда + span

line-height: 150px;

Это зачем вам?
Поставите нормальное значение, будет хорошо.
И line-height желательно указывать коэффициентом, без указания единиц измерения.
https://css-live.ru/css/metriki-shrifta-line-heigh...
https://learn.javascript.ru/font-size-line-height

чтобы сетка подстраивалась под текст, а не наоборот

Не задавайте высоту.

Поскольку эти цифры не подходят для тега sup, то это просто span сдвинутый наверх любым из способов
- position relative
- margin
- transform

Используйте css columns
https://jsfiddle.net/ezxpw42o/
Либо grid
Либо скрипты типа masonry

:not(:disabled)
input лишний был

Если блоки одинаковой высоты, то решается нужными отступами и nth-child.

Если высота не одинаковая, то masonry или его аналоги.

Атрибут colspan="88" отвечает за объединение ячеек.

У вас в одной строке одна ячейка а в другой 2.

Такие иконки вставляются либо
- фоном для кнопки
- псевдоэлементом
- фоном для псевдоэлемента

Например, фон для псевдо https://jsfiddle.net/uhs2Lqty/
Или просто фон https://jsfiddle.net/vez5ot1m/
Если есть шанс, что текста будет больше, чем на 1 строку, то флексами https://jsfiddle.net/80kLaygo/ или абсолютом https://jsfiddle.net/fn9p3zed/