Задача

Требуется сделать текущую вёрстку сайта полностью автомасштабируемой. Суть: сайт свёрстан на HTML+CSS и идеально выглядит только на разрешении 1200 px. Нужно, чтобы на абсолютно всех экранах (включая мобильные устройства) дизайн оставался визуально идентичным эталонному макету.

Основные требования

• Все элементы (шрифты, отступы, ширина, высота, межбуквенные интервалы) должны отображаться точно так же, как на 1200 px - без зума, отдаления или искажений.
• Дизайн на каждом устройстве (от маленьких телефонов до студийных мониторов 4K) визуально повторяет макет 1200 px, при этом функциональность не ломается.
• Существующие разрешения (мобильное, планшетное, 1900 px) либо используются для безупречной вёрстки, либо временно комментируются (но не удаляются), если мешают автомасштабированию.

Особые моменты

• Обнаружено 7 мест, где вёрстка съезжает при переводе на процентные размеры (построена не на колонках). Эти элементы нужно корректно адаптировать для автомасштабирования.
• После всех правок необходимо провести перепроверку по эталонному дизайну (Figmа), чтобы не нарушить утверждённую структуру.
• В процессе работы не должны пострадать интерактивные элементы и текущий функционал сайта.

Критерии приёмки

• На равном масштабе двух устройств (например, 1200 px и 1920 px) скриншоты сайта совпадают пиксель в пиксель по положению и размерам блоков.
• Не появляется горизонтальный скролл, дефекты отступов, перекосов блоков или нарушений шрифтов.
• Адаптации под любые экраны (от 320 px до 2560 px) не вносят потери качества и не «ломают» вёрстку при переключении ориентации.