Ankhena

display: flex;
justify-content: center;

ну или гридами, без разницы.

Как при наведении курсором на изменять цвет сразу у двух?

Начните с простого:
ответьте на вопрос, почему это вообще две ссылки?

После этого ссылка станет одной и проблема решится сама собой.

Либо css свойство columns либо плагины типа masonry.
Гриды сами по себе такого не сделают.

Флексы или гриды как раз так и делают

https://plugins.jetbrains.com/plugin/7499-gittoolbox

@keyframes up {
  0% {
    transform: translateY(1000px);
  }
  50% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(1000px);
  }
}

Только % пересчитайте как вам нужно. Я же без понятия сколько анимация и на сколько задержка.

Потому что название класса просто class без точки.

Ну попробуйте подумать со стороны браузера.

Высота родителя не указана, значит, зависит от размеров дочерних. Т.е. нужно сначала нарисовать дочерние, чтобы узнать высоту родителя.
Но дочернему вы хотите задать размер в % от родителя.

У вас получится в таких случаях:
- дочерний будет absolute, а родитель relative
- родитель будет гридом с использованием единиц fr.

Вам поможет display:contents для лишних оберток. И потом просто order.

Или просто удалить лишние обертки в коде, что еще разумнее.

Псевдоэлементами с радиальным градиентом
По аналогии с https://codepen.io/AnnaSummer/pen/GRyVzeY

Обычная разметка:
nav
в нем ссылка с лого и список с меню.

Логотип прибиваете абсолютом или лучше гридами по центру.
Список делаете тоже гридами или флексами.
Если флексами, то на случай переполнения пишете правила для nth-child.
Гридами и так нормально всё встанет.

Всё.

Есть плагин 2D Auto Layout https://www.figma.com/community/plugin/10544447779...

Обычный градиент

Если это действительно прогресс, а не украшалка, то есть тег progress.

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

Добавлять псевдо не при наведении, а сразу.
И задавать ему что-нибудь типа visibility: hidden

p.s. псевдоэлементы пишутся с двумя двоеточиями ::before

Начните читать эту непонятную портянку...
Далеко не нужно, первую строку.
Там есть image/png;base64
Т.е. вам прямым текстом сказано, что это обычная png засунутая в контейнер SVG

Это не контентные изображения.
Это украшения ссылок, их делают фонами и/или псевдоэлементами.
Поменять цвет удобно с помощью mask https://codepen.io/noahblon/post/coloring-svgs-in-...

Возможно ли это сделать для svg, добавленный через тег img?

Можно с помощью фильтров. Метод описан в статье по ссылке выше. Мало удобен.

Или лучше вставить код файла svg?

Лучше убрать картинки в css и использовать как mask.
Можно заинлайнить в CSS с помощью https://yoksel.github.io/url-encoder/

Казалось бы, с этим должно справляться свойство min-content. Но оно не справляется.

Оно справляется. Но вы не почитали, что значит auto.

Должно быть так
grid: min-content 1fr / 1fr 1fr;