SagePtr

А примерное соответствие цифр в CSS и наименований шрифтов - здесь: https://developer.mozilla.org/ru/docs/Web/CSS/font...

Видимо, из-за настройки "минимальный размер шрифта" в браузере. Вы задали базовый размер шрифта на странице равный 1px, и браузер этот размер может увеличить, если он ниже минимального и ненулевой, а в итоге все элементы, заданные в rem, изменят свой размер пропорционально этому увеличению.

В большинстве случаев поможет
background-size: cover;

Видимо, где-то ещё он объявлен с ключевым словом !important
Или какой-нибудь плагин обрабатывает этот элемент и заменяет на ссылку.

img {
  width: 100%;
}

не подходит?

Среднему добавить flex-grow: 1, остальным flex-grow: 0 (или не задавать, по умолчанию 0)

Учитывая, что при помощи препроцессоров можно легко поменять цвет, смысла в HSL-нотации не вижу)

А кто мешает-то?))
Единственная проблема - IE не поддерживают гриды, потому если среди аудитории вашего сайта есть редкостные извращенцы - они могут видеть страницу неправильно)

Не вижу в этом шрифте русских букв, и FontForge их не видит.

Можно градиентами задать: https://codepen.io/SagePtr/pen/rdgeNP?editors=0100
(на примере градиенты от жёлтого к красному для наглядности, но вполне можно заменить от белого к белом, и фон станет однородным, но с дыркой посередине в виде треугольника)

.mega-menu table td:nth-child(n+2)

.parent:hover - настраивает блок .parent, если на него или на любой элемент внутри наведена мышка
.parent:hover .child - настраивает все блоки .child, находящиеся внутри блока .parent, если на любой блок внутри этого блока наведена мышка
.parent .child:hover - настраивает только конкретный блок .child, на который наведена мышка.

А обычный селектор a:after не катит?

Для начала нужно решить, как именно должна выглядеть строка в случае, если элементы не помещаются. Вижу тут несколько вариантов:
1. Переносить на новую строку, новую строку центрировать
2. Переносить на новую строку, но выравнивать слева, если контента не хватает на 2 строки - выравнивать по центру
3. Отображать только то, что влезает в строку
4. Прокручивать.
От этого и плясать

В разных программах разные алгоритмы отображения растровых шрифтов. Вы удивитесь, но даже в трёх разных браузерах (Firefox, Chrome, IE) будут по-разному отображаться. И это только на одной ОС, а если те же браузеры взять на линуксе или маке (кроме IE) - то там тоже свои результаты будут, отличающиеся от Windows.
И более того, в фотошопе можно выбрать для текста 5 алгоритмов рендеринга

P.S. Но в вашем примере - у вас шрифт не загрузился, потому отображается стандартный вместо него.