Aetae

На самом деле вам нужен ­ - мягкий перенос:


Грубый break-word стоит использовать, только если вы никак не можете повлиять на выходной текст(т.е. почти никогда).

Градиентами:
Тень внутри сделайте тем же способом сами.)

document.activeElement

Преимущества в относительности.
Достаточно поменять шрифт у корня и он поменяется везде.
Недостатки в неочевидности.
Сейчас для этих целей стоит использовать rem, оставив em только там, где он действительно удобен.

Сам использую px и постоянно откладываю на потом переход на rem.)

SVG-фильтром захреначил как-то так:
Но это чисто из интереса. На бою стоит юзать вариант Ankhena, с добавкой js, если потребуется.
А вообще, по хорошему, стоило бы дизайнера отп*дить.

##[class^="layout__col_1_2"]

По обновлённому вопросу svg-фильтр примерно такой:
Цвет увы пока в двух местах задавать придётся, но в принципе если поиграться можно добиться и большего.

В нормальном браузере можно просто сделать так:

a {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

А вот если нужна поддержка ослика 11, то придётся грязно костылять(чем я сейчас заниматься, конечно, не буду:)).

Задав минимальную ширину?

По старинке.
Блоки в контейнер, контейнеру margin-top/left: -{размер отступа}, блокам margin-top/left: +{размер отступа}.
Вроде бы вот вам флекс, а чуть что - костыли всё те же.

pointer-events: none