Описание задачи

Необходимо исправить проблемы адаптивности и фиксации визуальных элементов:

  • SVG-фигуры смещаются при изменении масштаба окна браузера (менее или более 100%) - требуется их более жёсткое позиционирование и резиновая/отзывчивая вёрстка.
  • Текущий дизайн на ПК выглядит приемлемо, но на мобильных устройствах верстка «слетает» - нужна оптимизация под экраны смартфонов и планшетов.
  • Работа ведется в одном HTML-файле и подключенных стилях (CSS).

Что нужно сделать

  • Адаптировать SVG и другие блоки так, чтобы при различных масштабах (50%, 75%, 100%, 125%, 150%) и широком/узком экране контент оставался на своих местах.
  • Реализовать корректное отображение на устройствах с шириной до 320px (проверить Mobile First или адаптивные медиа-запросы).
  • Не трогать общую структуру и ТЗ по дизайну - менять только технику верстки и CSS.
  • При необходимости я предоставлю доступ к дизайн-макету.

Все исправления вносятся в один HTML-файл и его CSS - без пересборки или смены фреймворка.