Сергей delphinpro

Линию нарисовать градиентом на фоне UL по центру
LI сделать круглыми с фоном, расположить флексом, space-between.
По дефолту зеленые, .active - красный, .active ~ li - серые

Потому что вы не сделали того, что вам посоветовали =)
Вот и не получается

https://jsfiddle.net/DelphinPRO/7tkLwg50/1/

На гридах, без masonry

Двойной дефис используется в кастомных свойствах (css-переменных)
Крайне не рекомендуется использовать классы, начинающиеся с двойного дефиса.

ЗЫ.
Почему бы не использовать БЭМ по-человечески, как все?

<p class = "title title_size_big">
</p>

во-первых, никаких конфликтов,
во-вторых, другим разработчикам не придется ломать голову, что же здесь, бл,ть за БЭМ такой...

Держите



На гридах (CSS Grid) это решается в три строки (а если minmax заюзать, то и адаптив в эти же три строки уместится)

Да напишите сразу стилем, нафига так морочиться.

<div class="test" style="margin-bottom:10px">
</div>

И я вполне серьезно. Не должно быть таких модификаторов. Я уже подробнее писал по этому поводу, повторятся лень. Вкратце, если вам нужно по-быстрому поправить в каком-то месте стиль - воткните его инлайном.
Или заморочьтесь, продумайте семантику модификатора, нормально его назовите и используйте.

на гридах

Полное руководство по Flexbox

В вашем случае

.block {
  display: flex;
  align-items: center;
  min-height: 60px;
}
.block::before {
  flex-shrink: 0;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/C...
https://habr.com/ru/company/microsoft/blog/137705/
И еще много ссылок

Сами доработайте до нужной кондиции

примерно так https://jsfiddle.net/xka2y6g9/
только наоборот

.menu__item единственный потомок <li>

.menu > li:nth-child(5) > .menu__item { padding-right: 0; }

А лучше, наверное, у последнего обнулять

.menu > li:last-child > .menu__item { padding-right: 0; }

1. Откройте в Иллюстраторе.
   
2. Перейдите на вкладу монтажных областей.
   
3. Задайте размеры, например, 128х128 пикселей (это будет viewBox)
   
4. Задайте смещение по горизонтали на половину ширины (64пикс), по вертикали наполовину высоты отрицательно (-64пикс)
   
5. Перейдите на вкладку со слоями
   
6. Выделите всю иллюстрацию.
   
7. В верхней панели задайте положение по X = 64 (половина ширины), по Y = 64 (половина высоты)
   
8. Там же включите сохранение пропорций и выставьте размеры. Если картинка квадратная, то одинаковые значения ширины и высоты по размеру монтажной области (128пикс). Если картинка прямоугольная, то задаем размер равный монтажной области только по большей стороне, меньшая скорректируется благодаря сохранению пропорций.
   
9. Сохраните в формате SVG.
   

Теперь можете задавать для изображения любые размеры в стилях — картинка будет по центру вьюбокса.