xmoonlight

HTML5 Boilerplate (github)

Почитайте, как работает z-index.

Порядок медиа при сегментации разрешений: обычно от больших (desktop-first) к меньшим (выше - большие, ниже - меньшие; реже применяется подход: mobile-first) или указывайте явно, например:

@media (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
}

от 600 до 800 пикселей включительно.

Для экрана - есть медиа-запрос ориентации положения экрана (добавить к условию, правее):
and (orientation: landscape)или and (orientation: portrait)

API
https://habr.com/en/post/306726/

См. оф. документацию виджета Я.Карт.

viewport
scaleX
Основы отзывчивого веб-дизайна

Проблема с округлением во время рендеринга, как я понимаю.
Замечаю такое же поведение.

setInterval() внутри requestAnimationFrame()
используйте для этого (проверки с задержкой) переменную key

В js

Если иконка не динамическая - используйте серверный пререндер в статику (png).

Проверяйте связку запроса и MD5 сумму заголовка и "тела" страницы. Только после этого - разбирайтесь.

Нужен "бутерброд" (снизу вверх, к пользователю):
1. Человек и линии - SVG. ("подложка")
2. Блоки надписей (с круглыми пиктограммами) - контейнер DIV'ов. (основной текстовый контент)

Порядок создания:
1. Начинаем с п.2 (создаём контейнер DIV'ов с надписями внутри), т.к. нам нужен размер SVG на основе контейнера DIV.
2. Создаём SVG (точно ПОД контейнером DIV'ов с той же позицией и того же размера).
После того, как это сделано - динамически создаём соединительные линии используя координаты соединительных точек блока-человека и блоков-надписей (все вычисления и прорисовка линий на SVG - через JS).

Не знаю как надо было, сделал так:
https://codepen.io/xmoonlight/pen/Rqyozd

Конечный вариант (one - сверху, two - под one, other - внизу)
https://codepen.io/xmoonlight/pen/KrRgxJ

Можно открывать окно (НЕ ВКЛАДКУ!) с нужным линком по клику:
https://javascript.ru/window-open