, ни отступа над подвалом. Пустая полоса между снимком и подвалом не несёт смысла — подвал идёт сразу за снимком. */ .mk .sec.mk-end { margin-bottom: 0; } .mk main { padding-bottom: 34px; } .mk footer.bottom { margin-top: 0; } .mk-price { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; color: var(--ink); margin: 0 0 16px; } .mk-end .btn-row { justify-content: center; margin: 0; } .mk-note { color: var(--ink-3); font-size: 15.5px; margin: 16px 0 0; } /* ── Снимок владельца без фона ───────────────────────────────────────── Место ему — справа, у самого края окна, и вверх до строк «Кому имеет смысл прийти». Сам блок записи при этом остаётся на месте: цена и кнопка по центру своей колонки. Узкий экран — снимок под кнопкой по центру. Края растворяются по овалу; под фигурой мягкая тень-опора. */ .mk-por { margin: 22px 0 0; text-align: center; } .mk-por img { display: block; width: 100%; max-width: min(92vw, 720px); height: auto; margin: 0 auto; /* Края полностью скруглены и растворяются: у вырезанного снимка стол обрубался прямой линией и читался лодочкой. Тот же приём, что у портрета на «Методе». */ -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 45%, #000 68%, rgba(0,0,0,.6) 86%, transparent 100%); mask-image: radial-gradient(ellipse 58% 60% at 50% 45%, #000 68%, rgba(0,0,0,.6) 86%, transparent 100%); } .mk-por figcaption { margin: 6px 0 0; font-family: "Lora", Georgia, serif; font-style: italic; font-size: 15px; font-weight: 400; color: var(--ink-3); letter-spacing: .02em; } .mk-por::after { content: ""; display: block; width: 52%; max-width: 300px; height: 16px; margin: -10px auto 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(20,45,34,.15), rgba(20,45,34,0) 70%); } /* Широкий экран: блок записи стоит как стоял — своей колонкой, цена и кнопка по центру. Снимок только отходит вправо, к самому краю окна, и поднимается вверх, к строкам «Кому имеет смысл прийти». Он остаётся в потоке, поэтому страница под него растёт и на подвал он не наезжает. */ @media (min-width: 1200px) { .mk-por { width: clamp(560px, 62vw, 1080px); /* Вправо: базово правый край снимка в 24 px от края окна, плюс сдвиг ещё на 15 % его ширины — так открывается центральная надпись. Выступивший за окно край срезается (overflow-x: clip на body), полосы прокрутки из-за этого не появляется. */ margin: -228px calc(478px - 50vw - 0.15 * clamp(560px, 62vw, 1080px)) -18px auto; position: relative; z-index: 0; } .mk-por img { max-width: none; } /* Текст блока записи остаётся поверх снимка. */ .mk-end > .mk-price, .mk-end > .btn-row, .mk-end > .mk-note { position: relative; z-index: 1; } } @media (max-width: 600px) { .mk-por img { max-width: 94vw; } }