Softlink

Как вариант

На общую обертку можно навесить градиент https://jsfiddle.net/Lnjt21x7/.

Есть такой вариант https://jsfiddle.net/jzu4159x/

Для .gallery__item надо установить flex-shrink: 0;

Есть вариант на гридах

clip-path

Скорее всего надо идти от обратного: иметь два столбца, но нужные ячейки растягивать. Примерно так

Несколько вариантов.

Надо поменять местами input и span в разметке. Селектор + находит непосредственно следующий элемент.

Вполне ожидаемое поведение. Вы разметили таким образом, что у вас получилось по два одинаковых контейнера, которые имеют одинаковое положение на странице: "name const". И тут нет значения, что в html они расположены через один. Чтобы получить таблицу из этой разметки вам как раз не очень-то и нужен grid-template-areas, достаточно разметить положение колонок и строк. Вот так.

Нет. Инпут и таб должны иметь одного родителя, тогда сработает селектор ~.

Похоже на то, что у вас отображается правильный шрифт, только в другом Stylistic Set. Если подключали без вебпака ту же версию файла, то надо смотреть сборку, возможно где-то прописывается font-feature-settings.

Градиентом бы делал.

В fill после %23 вставляйте нужный цвет в hex.

Если такой вариант устраивает, то можно обойтись одной анимацией для иконок.