cristalex

Зачем вообще вы масштабируете экран браузера? Если проверяете адаптивность то в популярных браузерах есть специальные средства для изменения ширины макета в браузере.
Если вы, допустим, задали letter-spacing: 2px, то почему letter-spacing должен меняться при масштабировании? Перечитайте ещё раз как работает letter-spacing:
https://webref.ru/css/letter-spacing

#halat-calc .form > div

Очень плохая практика писать такие селекторы:
1) Использовать id в стилях лучше всего только если у блока больше нет никаких классов, если есть доступ к HTML лучше всегда добавляйте свой класс. А ID лучше оставить для использования в JS.
2) > div - а нужно ли вам оформлять таким образом тег? Возможно лучше ему класс присвоить? Почитайте про методологии типа БЭМ и прочие.
3) Длинная цепочка вложенных сеекторов. Если так писать весь CSS на сайте то в будущем при увеличении страниц на сайте это чревато увеличением пересекающихся стилей и кучей проблем с разруливанием стилей на разных страницах. Время на поддержку таких стилей увеличивается много кратно. И что самое главное, правя один такой стиль никогда нельзя быть уверенным что ничего больше не сломается на другой странице, где он же может применяться. Опять таки почитайте про методологии вёрстки.

Это конечно очень весело верстать такие макеты. Но дизайнер нарисовал откровенную фигню, а начальник (менеджер) это пропустил. Такое себе решение. Да и целесообразность размещения элементов именно таким образом весьма сомнительна :)

А в чём проблема везде использовать флексы? Вполне даже нормально :)

В начале года как раз тему по гибридным приложениям (с уклоном в нативные). Наиболее популярный конечно сейчас React Native, также ещё неплох NativeScript (есть под Angular и под Vue). Под RN много библиотек готовых, но из много устаревших и нерабочих (или при компиляции ошибки валятся), в основном из-за того, что RN идёт вперёд и выходят новые версии, а многие библиотеки и пакеты написанные пол года, год назад просто не обновляются под последнюю версию RN.
Ещё сейчас в тренде Flutter, который позволяет писать приложения по скорости не уступающие нативным. Но тут уже не JS, а новый язык DART учить надо.

Используйте универсальные конфиги.
https://opencart3x.ru/module/admin/universal-config-php

Вариантов напрашивается несколько:
1) Вырезать эту обводку картинкой и подкладывать картинку на фон. Но возникнут проблемы если размер блока меняется.
2) Сделать обводку основного блока голубым цветом. А сверху уже накладывать другой блок (можно использовать before или after) с границей белого цвета (левую границу отключить). Сам блок позиционировать абсолютно поверх основной границы.

А ну и не забыть объяснить дизайнеру что так делать не стоит даже если этого очень сильно хочет заказчик. Да и у самих дизайнеров часто фантазия так разгуляется, что разработчику хочется запустить в них что-то тяжёлое...
Удачи!!