/* Start:/local/templates/mgc/styles.css?178727008667412*/ /* ============================================================ MGC GROUP — общий слой сайта Собран из каркас/tokens.css и каркас/blocks.css скриптом _build/make_package.py. Руками не править: правка вносится в каркас и пересобирается, иначе слои разъедутся. Подключается один раз в шаблоне, до файла страницы. ============================================================ */ /* ============================================================ MGC GROUP — сквозной каркас: шрифты, типографика, палитра Источник: пакет_вёрстки/_общее/ТЗ_каркас.md Подключение шрифтов только локальное: системный фолбэк ломает пиксельную сверку (чужие метрики → другие переносы). ============================================================ */ @font-face { font-family: 'Helvetica Neue'; src: url('/local/templates/mgc/fonts/helvetica-neue/HelveticaNeue-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: block; } @font-face { font-family: 'Helvetica Neue'; src: url('/local/templates/mgc/fonts/helvetica-neue/HelveticaNeue-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: 'Helvetica Neue'; src: url('/local/templates/mgc/fonts/helvetica-neue/HelveticaNeue-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; } @font-face { font-family: 'Akt'; src: url('/local/templates/mgc/fonts/akt/Akt-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; } /* Gros Ventre — шрифт первой редакции макета. Снят 18 августа 2026: сайт живёт на Helvetica Neue, а старый шрифт оставался ровно в одном месте («Тогда / Сейчас» на «Истории») и тянул за собой лишний файл на каждой странице. Сами файлы шрифта в пакете оставлены — удалить можно вместе с папками fonts/gros-ventre. */ :root { /* --- сетка --- */ --canvas: 1440px; --container: 1200px; /* Боковое поле страницы. Тянется от 120 на холсте 1440 до 40 на 1024. Проценты, а не vw: процент считается от ширины сцены, которую браузер уже уменьшил на вертикальную полосу прокрутки, а 100vw полосу не вычитает и разъезжается с рендером гейта на те же 15px. Формула читается так: 40 плюс шестая часть того, на сколько окно шире 1024. На 1440 это 40 + 416/5.2 = 120 ровно, на 1024 — ровно 40. Тот же приём («тянущееся число») используется дальше по файлу для отступов, которые обязаны сходиться в двух точках сразу. Ниже 1024 поле продолжается второй формулой — см. запрос сразу под :root. */ /* Третий член добавлен 18 августа 2026 (правка 0.1 ревью клиента: «по бокам страницы серый зазор, картинка не доходит до краёв экрана»). Сцена сняла потолок 1440 и тянется по окну, поэтому выше холста поле обязано расти само: иначе контейнер 1200 прилип бы к левому краю, а справа осталась бы пустота в полэкрана. Третий член и есть центрирование контейнера — половина того, на сколько окно шире 1200. Ниже 1440 он всегда меньше второго и в max не выигрывает, поэтому вся дистанция 1024→1440 осталась ровно прежней: на 1024 поле 40, на 1440 — 120, как и было. Выше 1440 выигрывает он: на 1920 поле 360 и контент стоит по центру. Проверено рендером всех страниц на 1440/1920/2560. */ --gutter: max(40px, calc(40px + (100% - 1024px) * 80 / 416), calc((100% - 1200px) / 2)); /* Отступ между заголовком и текстом под ним. Одно число на весь сайт: первый экран, контентная секция, колонка формы — везде одинаково. Меняется только здесь. */ --gap-head: 32px; /* --- семейства --- */ --sans: 'Helvetica Neue', 'HelveticaNeueCyr', Helvetica, Arial, sans-serif; --arrow: 'Akt', 'Helvetica Neue', sans-serif; /* --- палитра --- */ --red: #b22029; --red-hover: #c8323b; --dark: #131720; --hero-bg: #f9f9f7; --white: #ffffff; --grey-bg: #f3f4f5; --blue-bg: #d7e3e7; --text: #1a1a1a; --text-secondary: #7a7a7a; --border-table: #b2b2b2; --border-search: #c8c7c7; --placeholder: #757575; --field-bg: #e8eaeb; /* поля фильтра, стр. 04 */ --dot-idle: #d9d9d9; /* неактивная точка слайдера, стр. 02 */ --dot-active: #000000; /* активная точка слайдера: в макете чистый чёрный, не --text */ --subtitle: #4a4a4a; /* подзаголовок, стр. 05 */ /* Границы и подписи карточек. Были объявлены прямо на страницах 03 и 04 одинаковыми значениями и в палитру не возвращались — подняты 7 августа 2026. */ --card-border: #cac7c7; --card-caption: #aeaeae; /* тёмная подложка секции с фотографией (кросслинк) */ --dark-photo: #1a1a1a; --glass: rgba(164, 155, 155, 0.1); --plate-border: rgba(0, 0, 0, 0.15); --black-60: rgba(0, 0, 0, 0.6); --black-50: rgba(0, 0, 0, 0.5); --on-dark-10: rgba(255, 255, 255, 0.1); --on-dark-30: rgba(255, 255, 255, 0.3); --on-dark-50: rgba(255, 255, 255, 0.5); --on-dark-60: rgba(255, 255, 255, 0.6); --on-dark-70: rgba(255, 255, 255, 0.7); --on-dark-85: rgba(255, 255, 255, 0.85); } /* ============================================================ ПОЛЕ СТРАНИЦЫ НИЖЕ 1024 — мобильная фаза Стандарт адаптива задаёт поля тремя числами: 120 на холсте, 40 и 20. Первая формула довела поле до 40 к 1024; вторая держит эти 40 до 768 и дальше тянет их до 20 на 375. Между 768 и 375 идёт прямая, ступеньки нет. Верхнюю границу clamp держит на 40: выше 768 вторая формула даёт больше сорока и просто упирается в потолок, поэтому запрос можно было бы ставить и от 1023, и от 768 — результат один. Оставлен 1023: одно место, где написано «ниже десктопа поле живёт по этому правилу». Числа читаются так: 20 плюс та доля от двадцати, какую окно набрало над 375 из 393 доступных до 768. На 768 это 20 + 20 = 40, на 375 — ровно 20. Процент внутри токена считается от того, к чему токен приложен, — от сцены и её секций, как и в первой формуле. Поле обязано меняться одним числом: на нём стоят шапка, крошки, колонки секций, форма и подвал. ============================================================ */ @media (max-width: 1023px) { :root { --gutter: clamp(20px, calc(20px + (100% - 375px) * 20 / 393), 40px); } } /* ============================================================ Типографические токены — из переменных Figma, не подбирать на глаз ============================================================ */ .t-h1-62 { font-weight: 700; font-size: 62px; line-height: 1; letter-spacing: -1px; } .t-h2-56 { font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -0.56px; } /* letter-spacing −0.24px, а не −1px: −1 не встречается на страницах ни разу, −0.24 стоит в 16 правилах на четырёх страницах. Токен приведён к тому, что реально свёрстано; правка вида ни на одной странице не даёт (класс нигде не подключён — ни на страницах, ни в preview). */ /* Заголовок 36 — из переменных Figma. Токен добавлен 18 августа 2026 по правке 2.2 ревью: класс t-h3-36 стоял в разметке «Направлений R&D», но правила под него в каркасе не было, и заголовок рисовался браузерным умолчанием h2 (32px, свой межстрочный интервал). Трекинг взят по той же пропорции, что у соседних токенов: −0.01em. */ .t-h3-36 { font-weight: 700; font-size: 36px; line-height: 1.1; letter-spacing: -0.36px; } .t-h3-24 { font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.24px; } .t-h3-24-caps { font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: 0; text-transform: uppercase; } .t-h4-16 { font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: 0; } .t-num-82 { font-weight: 700; font-size: 82px; line-height: 1.05; letter-spacing: -0.5px; } .t-text-20 { font-weight: 400; font-size: 20px; line-height: 1.4; } /* Межстрочность целым пикселем, а не коэффициентом: 16 × 1.4 = 22.4 уводит строки на дробные координаты. 22px стоит в 28 правилах контента против 5 каркасных с 1.4 — свели к большинству 7 августа 2026. Сверка при этом стала ЛУЧШЕ на пяти секциях (форма стр. 01: 1.12 → 0.80), хуже нигде. */ .t-text-16 { font-weight: 400; font-size: 16px; line-height: 22px; } .t-text-14 { font-weight: 400; font-size: 14px; line-height: 1.4; } .t-caption-12 { font-weight: 400; font-size: 12px; line-height: 18px; } /* Копирайт и соцсети футера. Единственное начертание Light в токенах: в макете нижняя строка футера тоньше остального текста. 10 мест на пяти страницах. */ .t-caption-13 { font-weight: 300; font-size: 13px; line-height: 19.5px; } .t-caption-14-caps { font-weight: 700; font-size: 14px; letter-spacing: 1.68px; text-transform: uppercase; } .t-button-20 { font-weight: 700; font-size: 20px; line-height: 20px; } .t-button-14 { font-weight: 400; font-size: 14px; line-height: 21px; } /* ============================================================ КРУПНЫЕ РАЗМЕРЫ НА УЗКИХ ШИРИНАХ Заголовки холста рассчитаны на строку в 1200 и на 375 рвут любую раскладку: одно слово в 62px занимает больше половины экрана. H1 идёт 62 → 44 → 32, числа взяты из решений по блокам стандарта. Для H2 решений по блокам нет, поэтому 56 → 40 → 30 собрано по каталогу поломок (там указана вилка 28–30 для мобильной ширины) и по шагу H1: разрыв между заголовками остаётся тем же, что на холсте. Трекинг едет пропорционально размеру, иначе на мелком кегле буквы слипаются: −1 при 62 даёт −0.71 при 44 и −0.52 при 32. Кнопка на 20px не помещается текстом уже на 375 — ниже 768 идёт 16. Правится в токенах, а не на страницах: один размер на все пять. ============================================================ */ @media (max-width: 1023px) { .t-h1-62 { font-size: 44px; letter-spacing: -0.71px; } .t-h2-56 { font-size: 40px; letter-spacing: -0.4px; } /* Тот же шаг, что у H2: 36 на холсте — 30 на узком экране. */ .t-h3-36 { font-size: 30px; letter-spacing: -0.3px; } /* Правка 8.3 (ревью 18 августа 2026): заголовки на узком экране слипаются строками. В токенах у заголовков line-height: 1 — на холсте это верно, там они стоят в одну строку и число снято с Figma. Ниже холста колонка узкая, тот же заголовок ложится в две-три строки, и при интерлиньяже, равном кеглю, строки идут вплотную: у прописных («ПРОИЗВОДСТВЕННАЯ ПЛОЩАДКА В ШУШАРАХ») выносные элементы соседних строк почти касаются. Интерлиньяж поднят только на узкой ширине — на холсте вид прежний. */ .t-h1-62, .t-h2-56, .t-h3-36 { line-height: 1.1; } .t-h3-24, .t-h3-24-caps { line-height: 1.25; } } @media (max-width: 767px) { .t-button-20 { font-size: 16px; line-height: 16px; } } @media (max-width: 639px) { .t-h1-62 { font-size: 32px; letter-spacing: -0.52px; } .t-h2-56 { font-size: 30px; letter-spacing: -0.3px; } } /* ============================================================ MGC GROUP — сквозные блоки: шапка, крошки, CTA-форма, футер Источник координат: пакет_вёрстки/_общее/ТЗ_каркас.md Канва 1440, контейнер 1200, поля 120. Позиционирование — absolute внутри секции (.section{position:relative}). Канва 1440 стала потолком, а не жёстким числом: сцена и секция тянутся от 1440 до 1024. Ниже 1024 раскладка меняется — это отдельная работа. ============================================================ */ /* --- база страницы --- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Фон под сценой белый, а не серый. Серый был виден по бокам, пока сцена упиралась в потолок 1440; потолок снят (см. .stage ниже), но фон оставлен белым сознательно: при полосе прокрутки и на резиновых секциях серый всё равно проступал бы кромкой. */ html, body { background: var(--white); font-family: var(--sans); color: #000; -webkit-font-smoothing: antialiased; } body { overflow-x: auto; } img { display: block; } /* Сцена тянется по окну и упирается в потолок 1440. Жёсткая ширина стояла здесь до 12 августа 2026 и держала всю вёрстку: страница ниже 1440 просто уезжала под горизонтальную прокрутку. На 1440 правка ничего не меняет — проверено рендером всех пяти страниц против базы приёмки. */ /* Потолок 1440 снят 18 августа 2026 (правка 0.1 ревью клиента). Сцена тянется по окну на любой ширине: секции, фотографии и цветные подложки доходят до краёв экрана, серого поля по бокам больше нет. Контент при этом не расползается — его держит поле страницы --gutter, у которого появился центрирующий член (см. :root). Токен --canvas остался: он задаёт ту ширину холста, от которой посчитаны доли внутри секций, и в этой роли по-прежнему равен 1440. */ .stage { width: 100%; max-width: none; margin: 0 auto; background: var(--white); } /* Нижнее поле секции — padding-bottom на самой секции, число у каждой своё и стоит рядом с её min-height на странице. Раньше поле было просто остатком жёсткой высоты: текст вырастал на строку — поле съедалось, и содержимое упиралось в край следующей секции. Padding живёт в потоке и едет вниз вместе с содержимым. Абсолютные подложки от него не двигаются: они привязаны через top, а padding-bottom растягивает нижний край и не трогает верхний. Ширина секции — по сцене. Своего числа у неё больше нет. ⚠️ overflow: hidden несёт ДВЕ обязанности разом, снимать нельзя ни одну: 1. Держит верхние отступы содержимого внутри секции. Снять обрезку, ничего не подставив, — отступы колонок (80 и 100) выпадают наружу и страница растёт на 240–580px на каждой из пяти. Замерено 12 августа 2026. 2. Режет декор по краю окна. Широкие фотографии и графика выходят за секцию вверх и вниз; снять обрезку, подставив display: flow-root вместо неё, — 9 секций на четырёх страницах меняют вид уже на 1440 (фон s05 «Разработки продуктов» заходит в s06 на 129px, графика s06 поднимается в s05 на 7.5px). Эта же обрезка и есть механизм адаптива для широкого декора: секция сузилась — кадр обрезался по её краю. Замеру узкие.py обрезка не мешает: координаты элемента от неё не зависят, список вылезших выходит тот же с ней и без неё — проверено. */ .section { position: relative; width: 100%; overflow: hidden; } /* ============================================================ ШАПКА — node 1141:16834 · высота 69 · фон rgba(0,0,0,0.01) ============================================================ */ /* Шапка идёт первой в потоке первого экрана, крошки встают следом отступом. position: relative и z-index обязаны остаться: подложки первого экрана (.hero__bg, .hero__photo, .hero__veil, .hero__fade, .hero__pic) стоят в разметке ДО
на четырёх страницах из пяти и при static закрасят шапку — геометрия при этом не изменится, пропадёт только видимость. Поля 116 слева и 120 справа несимметричны: логотип в макете стоит на 116. Поля 12 сверху и 5 снизу тоже: содержимое не центрировано в высоте 69. */ /* Боковые поля шапки едут вместе с полем страницы: логотип обязан стоять на одной вертикали с крошками и заголовком секции. Разница в 4px между левым и правым полем сохраняется на всей дистанции. */ .hdr { position: relative; z-index: 5; display: flex; align-items: center; height: 69px; padding: 12px var(--gutter) 5px calc(var(--gutter) - 4px); background: rgba(0, 0, 0, 0.01); } .hdr__logo { width: 303px; height: 52px; } /* margin-top: 1px — высота меню 21 нечётная, чистое центрирование даёт 27.5. Отступ от логотипа тянется от 109 до нуля: к 1024 семь пунктов меню уже не оставляют свободного места. Процент считается от содержимого шапки, а оно на 1440 равно 1204 (1440 минус поля 120 и 116), на 1024 — 948. Отсюда и числа в формуле: на 1204 она даёт ровно 109, на 948 — ровно 0. */ .hdr__nav { margin-left: max(0px, calc((100% - 948px) * 109 / 256)); margin-top: 1px; flex-shrink: 0; display: flex; align-items: flex-start; gap: 32px; } /* Зазор между пунктами — двумя ступенями, а не формулой: процент в gap считался бы от ширины самого меню, а она сама зависит от зазора. Замер: текст семи пунктов занимает 465px, логотип 303, кнопка 32. На 1024 при зазоре 20 ряд встаёт в 920 при доступных 948. */ @media (max-width: 1240px) { .hdr__nav { gap: 24px; } } @media (max-width: 1080px) { .hdr__nav { gap: 20px; } } .hdr__nav a { font-weight: 300; font-size: 14px; line-height: 21px; color: #000; text-transform: lowercase; text-decoration: none; white-space: nowrap; } /* flex-shrink: 0 — без него кнопка сминается в эллипс от первой же правки меню: удлинение пункта на 124px даёт 20×32 и правый край 1329. */ .hdr__search { margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--border-search); border-radius: 16px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; } .hdr__search img { width: 18px; height: 18px; } /* ============================================================ ШАПКА НИЖЕ 1024 — бургер и выпадающая панель Семь пунктов занимают в ряду 585px, логотип 303, кнопка поиска 32: вместе 920 при боковых полях 76. Меню целым помещается только в окно от 996px, поэтому порог поставлен на 1023 (решение Сергея, 13 августа 2026): между 996 и 1023 ряд ещё сходится, но держать ради 27 пикселей вторую раскладку незачем. Панель падает сверху и ложится ПОВЕРХ содержимого, не раздвигая его — так решено 12 августа. Отсюда absolute и непрозрачный фон: под шапкой на четырёх страницах из пяти лежит фотография или градиент, на прозрачной панели ссылки читаться не будут. Кнопка бургера живёт в разметке всегда и прячется на десктопе: так шапка остаётся одним куском разметки на все ширины, а порог задан одним местом. ============================================================ */ .hdr__burger { display: none; } @media (max-width: 1023px) { /* Меню перестаёт быть звеном ряда и становится панелью. Отступы ряда (margin-left по формуле и margin-top: 1px) снимаются: они считались от свободного места, которого здесь больше нет. */ .hdr__nav { position: absolute; left: 0; top: 100%; display: none; flex-direction: column; gap: 0; width: 100%; margin: 0; padding: 8px var(--gutter) 24px; background: var(--white); border-bottom: 1px solid var(--border-search); } .hdr[data-menu-open] .hdr__nav { display: flex; } /* Поле 12 сверху и снизу поднимает строку 21px до 45 — норма пальца 44. */ .hdr__nav a { padding: 12px 0; font-size: 16px; line-height: 21px; } /* Обе кнопки — один круг 44: столько же требует палец, а форма у них общая, чтобы ряд читался парой, а не случайными значками. */ .hdr__search { width: 44px; height: 44px; border-radius: 22px; } .hdr__burger { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 12px; padding: 0; width: 44px; height: 44px; border: 1px solid var(--border-search); border-radius: 22px; background: transparent; cursor: pointer; } /* Три линии рисуются одной полоской и двумя её псевдослоями: лишних элементов в разметке не заводим, картинки для этого тоже не нужно. */ .hdr__burger span { position: relative; display: block; width: 18px; height: 2px; background: #000; } .hdr__burger span::before, .hdr__burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #000; } .hdr__burger span::before { top: -6px; } .hdr__burger span::after { top: 6px; } /* Открытая панель — крест: средняя линия гаснет, крайние сходятся в центр. */ .hdr[data-menu-open] .hdr__burger span { background: transparent; } .hdr[data-menu-open] .hdr__burger span::before { top: 0; transform: rotate(45deg); } .hdr[data-menu-open] .hdr__burger span::after { top: 0; transform: rotate(-45deg); } } /* Логотип уходит с 303 на 200 на границе мобильного брейкпоинта. Ступень, а не формула: процент внутри ширины картинки считался бы от содержимого шапки, а оно само зависит от поля страницы. На 375 ряд после этого встаёт в 300 при доступных 339. Высота отдана пропорции: кадр 909×156 при 200 даёт 34.3, и на 303 он же даёт прежние 52. */ @media (max-width: 639px) { .hdr__logo { width: 200px; height: auto; } } /* ============================================================ ХЛЕБНЫЕ КРОШКИ — node 1141:16859 · left 120, top 81 ============================================================ */ /* Ширина 1200 получается из полей 120 слева и справа, отдельным числом не задаётся. Отступ 12 сверху не может выпасть наружу: крошки идут вторыми после шапки. */ /* flex-wrap: wrap — крошки остаются строкой, а на узком экране переносятся вместо того, чтобы уехать за край. Решение стандарта: отдельной раскладки им не нужно. На 1440 переноситься нечему, вид прежний. */ .crumbs { position: relative; margin: 12px var(--gutter) 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--text-secondary); } .crumbs a { color: inherit; text-decoration: none; } .crumbs span { color: inherit; } /* ============================================================ CTA-ФОРМА «Запросить коммерческое предложение» node 1141:17106 · высота 934 · фон #131720 ============================================================ */ /* Высота секции формы каркасу НЕ принадлежит: на пяти страницах это 800, 878, 912 и 934 — форма одна, а высота секции у каждой страницы своя. Числа 934 тут раньше стояли как «по умолчанию», и новая страница молча получала чужую высоту. Задавать высоту обязана страница. */ .cta { background: var(--dark); } /* Позиция снята численно по эталону s08: графика повёрнута на −90°, поэтому left/top заданы до поворота, а не по видимому краю. Вертикаль — формула центра: пять постраничных top (93.05 / 26.05 / 65.05 / 82.05 / 65.05) она заменяет одна. Графика остаётся absolute: после поворота видимый бокс 747.89×1354 вылезает за секцию сверху и снизу и за правый край холста, места в потоке ему взяться неоткуда. */ /* Графика сжимается вместе с холстом, пропорцию держит aspect-ratio, а доля вылета за правый край остаётся прежней: все три числа взяты долями от 1440, поэтому на 1440 получаются ровно прежние 541.95 / 1354 / 747.901. Вертикаль переехала с формулы центра на пару top: 50% + translateY(-50%): прежняя формула вычитала половину высоты числом, а высота теперь переменная. --bleed: 1 — метка «вылет за край сделан намеренно», её читает _build/узкие.py и не считает такой элемент поломкой. */ .cta__decor { --bleed: 1; position: absolute; left: calc(100% * 541.95 / 1440); top: 50%; width: calc(100% * 1354 / 1440); height: auto; aspect-ratio: 1354 / 747.901; transform: translateY(-50%) rotate(-90deg); mix-blend-mode: luminosity; pointer-events: none; } /* Колонка формы в потоке. position: relative держит порядок отрисовки поверх графики с mix-blend-mode, координату он больше не задаёт. Отступ 80 сверху не выпадает наружу из-за overflow: hidden у .section — снимут его, колонка прыгнет с 80 на 0. */ /* Левое поле — общее поле страницы, ширина 667 получает потолок по контенту: на 1024 доступно 944, так что число 667 доживает до конца дистанции само. */ .cta__col { position: relative; margin: 80px 0 0 var(--gutter); width: 667px; max-width: calc(100% - 2 * var(--gutter)); color: var(--white); } /* Тот же единый отступ заголовок → текст, что и в .sec__head. */ .cta__lead { margin-top: var(--gap-head); } /* Поля — node 1141:17112. Сетка два на пять: 295 + 10 + 360 = 665, ряды 70 / 70 / 106 / 47 с зазором 20. Высота 464 набирается сама, числом не задаётся. */ /* Треки стали долями, а ширина — потолком: 295 + 360 = 655 равно ширине формы без зазора, поэтому на 1440 каждый трек получает ровно своё прежнее число, а ниже оба сжимаются в одной пропорции. min(665px, 100%) — тот же приём, что у колонок: число живёт до тех пор, пока помещается. Проценты считаются от колонки формы, она уже сжата полем страницы. */ .cta__fields { display: grid; grid-template-columns: minmax(0, 295fr) minmax(0, 360fr); column-gap: 10px; row-gap: 20px; margin-top: 52px; width: min(665px, 100%); align-content: start; } .cta__group { position: static; } /* Подпись поля — только по классу: обёртка файловой строки тоже