Берете фотошоп.
Создаете файл, например, А4 с разрешением 72. Пишете в нем 14м шрифтом. Меняете разрешение на 300. Смотрите какой размер шрифта получился.
Может кто-нибудь объяснит поведение :nth-child(n)?
Вообще, это в любом справочнике написано.
Все -чайлды применяются к дочерним элементам своего родителя.
Т.е. при записи .box__item:nth-child(1) браузер сначала найдет родителя элемента .box__item и начнет считать его детей. Соответственно, первый ребенок у вас будет span, если он есть и div, если спана нет.
Горизонтальные границы заменила на фон градиентом в 1 точку (можно на псевдоэлементы поменять)
Опять же стоит вопрос как считать номера строк, чтобы ставить правильные отступы и границы. Но с другой стороны оно же как-то генерируется то схлопнутые, то отдельные блоки?
Ну и пооптимизировать свойства, наверное, еще можно.
А у вас на картинке первый блок вроде сам по себе, а второй и третий вместе. Я не до конца представила себе как оно должно работать.
Может и ссылка не подойдет.
Создаете файл, например, А4 с разрешением 72. Пишете в нем 14м шрифтом. Меняете разрешение на 300. Смотрите какой размер шрифта получился.