/* Сувенир Де Люкс — стили сайта */ :root { --accent: #a33a1e; --accent-soft: #e8c9aa; --bg: #faf7f2; --band: #f2ece2; --deep: #2a241e; --footer: #201b16; --ink: #2a241e; --ink-2: #4a4238; --ink-3: #5c5348; --muted: #7a6f60; --muted-2: #8a7c69; --line: #e8e0d4; --line-2: #e2d8c8; --stripe-a: #efe7da; --stripe-b: #e7dccb; --serif: Prata, Georgia, serif; --sans: Manrope, system-ui, sans-serif; --pad-x: clamp(16px, 5vw, 48px); --pad-y: clamp(56px, 8vw, 104px); --stripes: repeating-linear-gradient(135deg, var(--stripe-a) 0 12px, var(--stripe-b) 12px 24px); --stripes-sm: repeating-linear-gradient(135deg, var(--stripe-a) 0 10px, var(--stripe-b) 10px 20px); } /* Темы: и т.д. */ .theme-emerald { --accent: #1d6b4f; --accent-soft: #bfe3d1; --deep: #14312a; --footer: #0f2621; --band: #e9f1ea; --stripe-a: #e2ece5; --stripe-b: #d3e2d8; } .theme-bordeaux { --accent: #8a1f36; --accent-soft: #f0c9d1; --deep: #2b1620; --footer: #20101a; --band: #f6ebee; --stripe-a: #f0e2e5; --stripe-b: #e6d2d7; } .theme-indigo { --accent: #28468f; --accent-soft: #c6d3f0; --deep: #161d33; --footer: #111528; --band: #e9edf6; --stripe-a: #e3e8f2; --stripe-b: #d3dbeb; } .theme-ochre { --accent: #9a6a12; --accent-soft: #f2d9a5; --deep: #2e2517; --footer: #231b10; --band: #f6efdf; --stripe-a: #f0e6d1; --stripe-b: #e6d8bd; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); overflow-x: hidden; -webkit-text-size-adjust: 100%; } a { color: #6b4a2f; text-decoration: none; } a:hover { color: var(--accent); } ::selection { background: #e6d8c6; } h1, h2, h3, p { margin: 0; } /* Типографика */ .eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .eyebrow--sm { font-size: 11px; letter-spacing: 0.16em; } .h1 { font-family: var(--serif); font-size: clamp(34px, 6.5vw, 66px); line-height: 1.06; letter-spacing: -0.01em; text-wrap: pretty; } .h2 { font-family: var(--serif); font-size: clamp(27px, 4.4vw, 42px); line-height: 1.15; } .h3 { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 36px); line-height: 1.18; } .lead { font-size: 19px; line-height: 1.6; color: var(--ink-3); max-width: 520px; text-wrap: pretty; } .body-text { font-size: 17px; line-height: 1.7; color: var(--ink-2); } .note { font-size: 13px; color: var(--muted-2); line-height: 1.6; } /* Каркас */ .section { padding: var(--pad-y) var(--pad-x); border-bottom: 1px solid var(--line); } .section--band { background: var(--band); } .section--deep { background: var(--deep); color: #f2ece2; border-bottom: 0; } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(28px, 4vw, 64px); } .stack { display: flex; flex-direction: column; gap: 20px; } .stack--tight { gap: 14px; } .stack--wide { gap: 28px; } .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } .grid-cards--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-cards--narrow { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* Шапка */ .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px var(--pad-x); background: rgba(250, 247, 242, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .logo { font-family: var(--serif); font-size: 19px; letter-spacing: 0.04em; color: var(--ink); } .site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px clamp(14px, 2vw, 30px); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; margin-left: auto; } .site-nav a { color: var(--ink-3); } .site-nav a:hover { color: var(--accent); } .site-cta-mobile { display: none; } .site-cta-desktop { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid #ddd2c0; padding: 8px 12px; border-radius: 2px; } .site-cta-desktop:hover { color: var(--accent); border-color: #c9bca8; } /* Первый экран */ .hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: stretch; min-height: min(640px, 82vh); border-bottom: 1px solid var(--line); } .hero__text { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: clamp(56px, 8vw, 96px) clamp(16px, 5vw, 64px); } .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 8px; } /* Кнопки */ .btn { padding: 15px 30px; border-radius: 2px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; } .btn--solid { background: var(--ink); color: var(--bg); } .btn--solid:hover { background: var(--accent); color: #fff; } .btn--ghost { border: 1px solid #cdc2b1; color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); color: var(--ink); } /* Плейсхолдеры под фото */ .ph { background: var(--stripes); display: flex; align-items: center; justify-content: center; } .ph--sm { background: var(--stripes-sm); } .ph--hero { min-height: min(520px, 60vh); } .ph__label { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.1em; color: var(--muted-2); background: var(--bg); padding: 10px 16px; text-align: center; } .ph__label--sm { font-size: 11px; letter-spacing: 0.08em; padding: 8px 12px; } .ph__label--xs { font-size: 10px; letter-spacing: 0; padding: 6px 8px; } /* Полоса фактов */ .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-bottom: 1px solid var(--line); } .fact { padding: 40px 32px; border-right: 1px solid var(--line); } .fact:last-child { border-right: 0; } .fact__num { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 38px); color: var(--accent); } .fact__label { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; padding-top: 6px; } /* Заголовок раздела с подписью справа */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 44px; } .section-head__aside { font-size: 15px; color: var(--muted); max-width: 340px; line-height: 1.6; } /* Карточки собак */ .dog { display: flex; flex-direction: column; gap: 16px; } .dog__photo { aspect-ratio: 3 / 4; } .dog__name { font-family: var(--serif); font-size: 22px; } .dog__meta { font-size: 14px; color: var(--muted); } /* Помёты */ .litter { display: grid; grid-template-columns: minmax(104px, 150px) minmax(180px, 1fr); gap: 24px; background: var(--bg); border: 1px solid var(--line-2); padding: 24px; } .litter__photo { aspect-ratio: 1 / 1; } .litter__body { display: flex; flex-direction: column; gap: 10px; } .litter__title { font-family: var(--serif); font-size: 24px; } .litter__text { font-size: 15px; color: var(--ink-3); line-height: 1.6; } .litter__link { font-size: 14px; font-weight: 600; padding-top: 6px; color: var(--accent); } /* Мелкие пункты «что входит» */ .bullet { display: flex; flex-direction: column; gap: 8px; } .bullet__title { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; } .bullet__text { font-size: 14px; color: #6b6155; line-height: 1.55; } /* Таблицы-строки */ .rows { display: flex; flex-direction: column; } .row { display: grid; grid-template-columns: minmax(104px, 150px) minmax(180px, 1fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--line-2); } .row--head { border-top: 0; padding: 0 0 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; } .row--3 { grid-template-columns: minmax(104px, 170px) minmax(180px, 1fr) minmax(180px, 1fr); align-items: start; padding: 20px 0; } .row--titles { grid-template-columns: minmax(120px, 200px) minmax(220px, 1fr) auto; gap: 32px; padding: 28px 0; align-items: start; } .row--breed { grid-template-columns: minmax(120px, 180px) 1fr; gap: 20px; padding: 16px 0; font-size: 15px; } .row__key { color: var(--muted-2); } .row__age { font-family: var(--serif); font-size: 19px; color: var(--accent); } .row__main { display: flex; flex-direction: column; gap: 5px; } .row__what { font-size: 16px; font-weight: 600; } .row__note { font-size: 14px; color: #6b6155; line-height: 1.55; } .row__date { font-family: var(--serif); font-size: 20px; } .row__who { font-size: 14px; color: var(--muted); text-align: right; } .row__place { font-size: 14px; color: var(--muted-2); } /* Карточка на светлом фоне */ .card { display: flex; flex-direction: column; gap: 8px; background: var(--bg); border: 1px solid var(--line-2); padding: 20px; } .card--lg { padding: 24px; } .card__title { font-size: 15px; font-weight: 700; } .card__title--serif { font-family: var(--serif); font-size: 21px; font-weight: 400; } .card__text { font-size: 14px; color: #6b6155; line-height: 1.6; } /* Дневник и виджет VK */ .diary { display: flex; flex-direction: column; align-items: center; gap: 40px; border-top: 1px solid var(--line-2); padding-top: 48px; margin-top: 8px; } .diary__inner { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; max-width: 760px; } .diary__text { font-size: 18px; line-height: 1.7; max-width: 620px; text-wrap: pretty; } .diary__by { font-size: 16px; color: var(--muted); } .diary__by a { color: var(--accent); font-weight: 600; } .vk-wrap { display: flex; justify-content: center; width: 100%; } .vk-wrap > div { width: 100%; max-width: 400px; } .vk-collapsible { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; } .vk-toggle { border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 14px; } .vk-toggle:hover { border-color: #c8bba7; color: var(--accent); } .vk-wrap[hidden] { display: none; } /* Контакты */ .contacts__title { font-family: var(--serif); font-size: clamp(28px, 4.6vw, 44px); line-height: 1.12; color: var(--bg); } .contacts__lead { font-size: 17px; line-height: 1.7; color: #c4b9a9; max-width: 520px; } .contacts .eyebrow { color: var(--accent-soft); } .contact-rows { display: flex; flex-direction: column; gap: 4px; } .contact-row { display: grid; grid-template-columns: minmax(104px, 140px) 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid #4a4238; font-size: 16px; } .contact-row:last-child { border-bottom: 1px solid #4a4238; } .contact-row__key, .contact-row__muted { color: #8f8474; } .contact-row a { color: var(--accent-soft); } .contact-row a:hover { color: #fff; } .contact-form-wrap { margin-top: 24px; border-top: 1px solid #4a4238; padding-top: 18px; } .contact-form-wrap--compact { margin-top: 16px; padding-top: 14px; } .contact-form-head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; } .contact-form__title { font-family: var(--serif); font-size: clamp(21px, 2.8vw, 28px); color: var(--bg); line-height: 1.2; } .contact-form__lead { font-size: 14px; color: #c4b9a9; line-height: 1.5; max-width: 620px; } .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .contact-field { display: flex; flex-direction: column; gap: 6px; } .contact-field span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #a79a88; font-weight: 600; } .contact-field input, .contact-field textarea { width: 100%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); padding: 10px 12px; font-size: 14px; line-height: 1.45; } .contact-field input:focus, .contact-field textarea:focus { outline: 1px solid var(--accent-soft); border-color: var(--accent-soft); } .contact-field textarea { resize: vertical; min-height: 88px; } .contact-field--full { grid-column: 1 / -1; } .contact-form__submit { grid-column: 1 / -1; justify-self: start; padding: 12px 18px; } .contact-form__hint, .contact-form__success { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; } .contact-form__hint { color: #a79a88; } .contact-form__success { color: var(--accent-soft); } .contact-cta { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #4a4238; max-width: 520px; } .contact-cta__title { font-family: var(--serif); font-size: 22px; color: var(--bg); line-height: 1.2; } .contact-cta__text { font-size: 14px; color: #c4b9a9; line-height: 1.5; } .contact-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; } .contact-modal__backdrop { position: absolute; inset: 0; background: rgba(24, 20, 17, 0.56); } .contact-modal__dialog { position: relative; width: min(680px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); padding: 22px; z-index: 1; } .contact-modal__close { position: absolute; top: 8px; right: 10px; font-size: 26px; line-height: 1; color: #8c7d69; } .contact-modal__close:hover { color: var(--accent); } .contact-modal .contact-form__title { color: var(--ink); } .contact-modal .contact-form__lead { color: var(--ink-3); } .contact-modal .contact-field span { color: var(--muted); } .contact-modal .contact-form__hint { color: var(--muted); } .contact-modal .contact-form__success { color: var(--accent); } .contact-modal[hidden] { display: none; } body.modal-open { overflow: hidden; } /* Подвал */ .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 22px var(--pad-x); background: var(--footer); color: #7d7263; font-size: 13px; } .site-footer a { color: #7d7263; } .site-footer a:hover { color: var(--accent-soft); } /* Страница «Полезное владельцу» */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px var(--pad-x); border-bottom: 1px solid var(--line); } .page-header__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; } .page-header a.back { font-size: 14px; font-weight: 600; color: var(--ink-3); } .page-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 64px); padding: clamp(48px, 7vw, 88px) var(--pad-x) clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); align-items: end; } .page-hero h1 { font-family: var(--serif); font-size: clamp(30px, 5.6vw, 56px); line-height: 1.08; max-width: 760px; text-wrap: pretty; } .page-hero p { font-size: 15px; line-height: 1.65; color: #6b6155; } .section--doc { padding: clamp(48px, 7vw, 80px) var(--pad-x); } .doc-intro { font-size: 16px; color: #6b6155; line-height: 1.6; max-width: 760px; } .canada-item { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--accent); padding-top: 18px; } .canada-item__title { font-size: 17px; font-weight: 700; } .canada-item__text { font-size: 15px; color: var(--ink-3); line-height: 1.65; } .care-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .care-cell { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); } .care-cell__freq { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .care-cell__title { font-size: 16px; font-weight: 600; } .care-cell__text { font-size: 14px; color: #6b6155; line-height: 1.6; } .sources { display: flex; flex-direction: column; } .source { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px 0; border-top: 1px solid #4a4238; font-size: 16px; line-height: 1.45; color: var(--accent-soft); } .source:hover { color: #fff; } .source__arrow { color: #8f8474; } /* Единая мобильная логика для основных страниц */ @media (max-width: 900px) { .section, .section--doc { padding: 44px 18px; } .site-header { gap: 10px; padding: 12px 18px; } .site-header .logo { font-size: 16px; letter-spacing: 0.03em; } .site-cta-mobile { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid #ddd2c0; padding: 8px 12px; border-radius: 2px; } .site-cta-desktop { display: none; } .site-cta-mobile:hover { color: var(--accent); border-color: #c9bca8; } .site-nav { display: block; width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; font-size: 13px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; white-space: nowrap; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { display: inline-flex; align-items: center; white-space: nowrap; margin-right: 18px; vertical-align: middle; } .site-nav a:last-child { margin-right: 0; } .hero { grid-template-columns: 1fr; min-height: 0; } .hero > .ph, .hero > .ph--hero { order: 1; min-height: 300px; } .hero__text { order: 2; gap: 18px; padding: 32px 18px 36px; } .hero__actions { flex-direction: column; gap: 10px; padding-top: 4px; } .hero__actions .btn { text-align: center; padding: 16px 20px; } .h1 { font-size: 34px; line-height: 1.1; } .h2 { font-size: 27px; } .h3 { font-size: 25px; } .lead { font-size: 16px; } .body-text { font-size: 16px; line-height: 1.65; } .eyebrow { font-size: 11px; letter-spacing: 0.2em; font-weight: 700; } .facts { grid-template-columns: 1fr 1fr; } .fact { padding: 22px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .fact:nth-child(2n) { border-right: 0; } .fact:nth-last-child(-n + 2) { border-bottom: 0; } .fact__num { font-size: 26px; } .fact__label { font-size: 12px; line-height: 1.45; } #dogs .grid-cards { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; cursor: grab; scroll-behavior: smooth; } #dogs .grid-cards::-webkit-scrollbar { display: none; } #dogs .grid-cards > .dog { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; } #dogs .grid-cards > .dog:active { cursor: grabbing; } .dog__name { font-size: 18px; line-height: 1.25; } .dog__meta { font-size: 13px; } #puppies .grid-cards--wide, #care .grid-cards--wide { grid-template-columns: 1fr; gap: 12px; } .card { padding: 16px; gap: 6px; } .page-header { padding: 12px 18px; gap: 12px; } .page-header__actions { width: 100%; margin-left: 0; order: 3; justify-content: flex-start; padding-bottom: 4px; } .page-header .logo { font-size: 16px; } .page-header a.back { font-size: 13px; } .page-hero { grid-template-columns: 1fr; gap: 18px; padding: 36px 18px 32px; } .page-hero h1 { font-size: 30px; line-height: 1.12; } .doc-intro { font-size: 15px; } .contact-form { grid-template-columns: 1fr; gap: 12px; } .contact-modal { padding: 12px; } .contact-modal__dialog { padding: 18px 14px; } } /* Адаптив */ @media (max-width: 720px) { .section-head { flex-direction: column; align-items: flex-start; gap: 18px; } .section-head__aside { max-width: none; } .row, .row--3, .row--breed { grid-template-columns: 1fr; gap: 6px; } .row--titles { grid-template-columns: 1fr; gap: 8px; } .row__who { text-align: left; } .row--head { display: none; } .litter { grid-template-columns: 1fr; } .litter__photo { max-width: 120px; } .care-cell { border-right: 0; } .contact-row { grid-template-columns: 1fr; gap: 4px; } .site-footer { flex-direction: column; align-items: flex-start; } } /* ───── Мобильная версия (отдельные страницы) ───── */ .mobile { width: 100%; max-width: 480px; margin: 0 auto; } .mobile .section, .mobile .section--doc { padding: 44px 18px; } .mobile .h1 { font-size: 34px; line-height: 1.1; } .mobile .h2 { font-size: 27px; } .mobile .h3 { font-size: 25px; } .mobile .lead { font-size: 16px; } .mobile .body-text { font-size: 16px; line-height: 1.65; } .mobile .eyebrow { font-size: 11px; letter-spacing: 0.2em; font-weight: 700; } .m-header { position: sticky; top: 0; z-index: 20; background: rgba(250,247,242,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .m-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; } .m-header .logo { font-size: 16px; letter-spacing: 0.03em; } .m-cta { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid #ddd2c0; padding: 8px 12px; border-radius: 2px; } .m-nav { display: flex; gap: 18px; overflow-x: auto; padding: 0 18px 10px; font-size: 13px; font-weight: 500; scrollbar-width: none; } .m-nav::-webkit-scrollbar { display: none; } .m-nav a { color: var(--ink-3); white-space: nowrap; } .m-hero__photo { height: 300px; } .m-hero__text { display: flex; flex-direction: column; gap: 18px; padding: 32px 18px 36px; } .m-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; } .m-actions .btn { text-align: center; padding: 16px 20px; } .m-facts { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); } .m-facts .fact { padding: 22px 18px; border-bottom: 1px solid var(--line); } .m-facts .fact:nth-child(2n) { border-right: 0; } .m-facts .fact:nth-last-child(-n+2) { border-bottom: 0; } .m-facts .fact__num { font-size: 26px; } .m-facts .fact__label { font-size: 12px; line-height: 1.45; } .m-scroller { display: flex; gap: 14px; overflow-x: auto; padding: 0 18px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; } .m-scroller::-webkit-scrollbar { display: none; } .m-scroller > * { flex: 0 0 78%; scroll-snap-align: start; } .m-hint { font-size: 12px; color: #9a8f7e; padding: 18px 18px 0; } .is-dragging { cursor: grabbing !important; } .is-dragging a { pointer-events: none; } .mobile .dog__name { font-size: 18px; line-height: 1.25; } .mobile .dog__meta { font-size: 13px; } .m-litter { display: flex; flex-direction: column; gap: 14px; background: var(--bg); border: 1px solid var(--line-2); padding: 18px; } .m-litter__top { display: flex; gap: 14px; align-items: flex-start; } .m-litter__photo { flex: 0 0 84px; height: 84px; } .m-litter__title { font-family: var(--serif); font-size: 20px; line-height: 1.2; } .m-list { display: flex; flex-direction: column; } .m-list__item { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line-2); } .m-list__item--boxed { border-top: 0; border-bottom: 1px solid var(--line-2); } .m-optional { font-size: 14px; color: #6b6155; line-height: 1.55; padding-left: 12px; border-left: 2px solid var(--line-2); } .mobile .contact-row { grid-template-columns: 1fr; gap: 3px; padding: 14px 0; } .mobile .contact-row__key { font-size: 13px; } .mobile .site-footer { flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 18px 32px; line-height: 1.5; } .mobile .vk-wrap > div { max-width: 340px; }