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

Требуется выполнить HTML и CSS верстку одного экрана оверлея для видеотрансляции (например, для vMix). Экран имеет формат 9:16 и строго фиксированный размер 1080×1920 пикселей. Задача - сверстать оверлей по макетам с точным соблюдением пропорций, отступов и расположения элементов, пиксель в пиксель.

Общие требования

• Только чистый HTML и CSS, без использования фреймворков или библиотек.
• Верстка неадаптивная - все размеры, отступы, шрифты задаются строго в пикселях.
• Фон оверлея должен быть частично прозрачным, так как накладывается поверх видео.
• Корректная работа при разрешении 1080×1920, визуальное совпадение с макетом без растяжений и смещений (прыжков).

Структура экрана

Макет состоит из следующих блоков сверху вниз:

• Номер лота и бейджи - отображается в верхней части.
• Ценовой блок - включает старую цену, новую цену, размер скидки.
• Информационный блок - содержит описание товара/лота.
• Блок с кнопками размеров - кнопки, отображающие доступные размеры. Интерактив не нужен - только статическое отображение.
• Декоративный фон - графический элемент в нижней части экрана.

Состояния экрана

• Минимальное состояние - отображается только номер лота и бейдж.
• Среднее состояние - номер лота + ценовой блок.
• Полное состояние - номер лота + ценовой блок + описание и блок с размерами.

Переключение состояний реализовать переключением CSS-классов или отдельными HTML-файлами (на усмотрение исполнителя). Тексты, контент, номера, данные - соответствуют параметрам из предоставленного макета. Координаты всех элементов можно взять из макетов (и ложить элементы с точным соответствием).