/* Theme Name: Marina Massage Theme URI: https://example.com Author: Marina Massage Studio Author URI: https://example.com Description: Кастомная двуязычная (RU/HE) тема для массажного кабинета. Один консолидированный style.css + один js/theme.js, без ACF и page-builder'ов -- всё содержимое hardcoded в шаблонах страниц. HE-страницы используют те же классы что и RU: направление (LTR/RTL) переключается через dir="rtl" на (см. header-he.php), а вся раскладка построена на CSS logical properties (margin-inline-*, text-align: start/end, grid) вместо left/right, поэтому одна и та же таблица стилей корректно отражается в обе стороны без дублирования в отдельном rtl.css. Version: 1.0.0 License: Proprietary Text Domain: marina-massage */ /* ========================== RESET ========================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } img, picture { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; width: 100%; } /* ========================== ТОКЕНЫ ДИЗАЙНА Палитра снята с референсов клиента (hero-фото со свечами/камнями, оливково- золотой круглый логотип): тёплый оливковый + кремовый + золото. ========================== */ :root { --sage: #a39f5a; --sage-dark: #7a7744; --sage-darker: #5a5731; --sage-light: #bfbc8c; --cream: #f8f4e9; --cream-deep: #efe6d0; --gold: #c9a05a; --gold-light: #e3c98c; --ink: #2f2a1f; --ink-soft: #6b6152; --white: #ffffff; --line: #e4dcc8; --shadow: 0 20px 50px -20px rgba(47, 42, 31, 0.35); --shadow-sm: 0 8px 20px -10px rgba(47, 42, 31, 0.25); --font-body: 'Heebo', 'Arial', sans-serif; --font-head: 'Cormorant Garamond', 'Georgia', serif; --font-head-he: 'Heebo', 'Arial', sans-serif; --container: 1200px; --radius: 18px; --radius-sm: 10px; } /* HE-страницы: своих декоративных засечек в кириллице/иврите одновременно не существует, поэтому у заголовков на иврите используем жирный Heebo вместо Cormorant Garamond -- см. .mn-lang-he в конце файла. */ /* ========================== БАЗОВАЯ ТИПОГРАФИКА ========================== */ body { font-family: var(--font-body); background: var(--cream); color: var(--ink); line-height: 1.6; font-size: 16px; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; color: var(--sage-darker); } .mn-lang-he h1, .mn-lang-he h2, .mn-lang-he h3, .mn-lang-he h4 { font-family: var(--font-head-he); font-weight: 700; } h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); } h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); } h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); } p { color: var(--ink-soft); } .mn-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-block-end: 12px; } .mn-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gold); display: inline-block; } /* ========================== LAYOUT / CONTAINER ========================== */ .mn-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .mn-section { padding-block: clamp(48px, 8vw, 96px); } .mn-section--tight { padding-block: clamp(32px, 5vw, 56px); } .mn-section--sage { background: var(--sage); color: var(--white); } .mn-section--sage h2, .mn-section--sage h3 { color: var(--white); } .mn-section--sage p { color: rgba(255,255,255,0.85); } .mn-section--cream-deep { background: var(--cream-deep); } .mn-section__head { max-width: 720px; margin-block-end: 40px; } .mn-section__head--center { margin-inline: auto; text-align: center; } /* ========================== КНОПКИ ========================== */ .mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; white-space: nowrap; } .mn-btn--gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--ink); box-shadow: var(--shadow-sm); } .mn-btn--gold:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .mn-btn--outline { border: 1.5px solid currentColor; background: transparent; } .mn-btn--outline:hover { background: rgba(255,255,255,0.12); } .mn-btn--sage { background: var(--sage); color: var(--white); } .mn-btn--sage:hover { background: var(--sage-dark); transform: translateY(-2px); } .mn-btn--cream { background: var(--cream); color: var(--sage-darker); box-shadow: var(--shadow-sm); } .mn-btn--cream:hover { background: var(--white); transform: translateY(-2px); } .mn-btn--block { width: 100%; } /* ========================== ШАПКА / НАВИГАЦИЯ (.mn-nav) ========================== */ .mn-nav { position: sticky; top: 0; z-index: 100; background: rgba(248, 244, 233, 0.92); backdrop-filter: blur(10px); border-block-end: 1px solid var(--line); transition: box-shadow 0.25s ease; } .mn-nav--scrolled { box-shadow: var(--shadow-sm); } .mn-nav__inner { max-width: var(--container); margin-inline: auto; padding-inline: 24px; height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .mn-nav__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .mn-nav__logo img { height: 56px; width: 56px; object-fit: contain; } .mn-nav__logo-text { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--sage-darker); } .mn-lang-he .mn-nav__logo-text { font-family: var(--font-head-he); } .mn-nav__links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .mn-nav__item { position: relative; } .mn-nav__link { display: flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 999px; font-size: 0.95rem; font-weight: 600; color: var(--ink); transition: background 0.2s ease, color 0.2s ease; } .mn-nav__link:hover, .mn-nav__link--active { background: var(--sage); color: var(--white); } .mn-nav__caret { font-size: 0.65em; opacity: 0.7; } .mn-nav__dropdown { position: absolute; inset-inline-start: 0; top: calc(100% + 10px); min-width: 240px; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .mn-nav__item:hover .mn-nav__dropdown, .mn-nav__item:focus-within .mn-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .mn-nav__dropdown a { display: block; padding: 12px 14px; border-radius: 8px; font-size: 0.92rem; font-weight: 600; color: var(--ink); } .mn-nav__dropdown a:hover { background: var(--cream-deep); color: var(--sage-dark); } .mn-nav__aside { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .mn-nav__lang { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 700; font-size: 0.85rem; color: var(--sage-dark); transition: background 0.2s ease, border-color 0.2s ease; } .mn-nav__lang:hover { background: var(--sage); color: var(--white); border-color: var(--sage); } .mn-nav__burger { display: none; flex-direction: column; gap: 5px; width: 30px; padding: 6px; } .mn-nav__burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .mn-nav__burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mn-nav__burger--open span:nth-child(2) { opacity: 0; } .mn-nav__burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mn-nav__mobile { display: none; flex-direction: column; background: var(--white); border-block-end: 1px solid var(--line); padding: 12px 24px 24px; } .mn-nav__mobile--open { display: flex; } .mn-nav__mobile a { padding: 12px 4px; font-weight: 600; border-block-end: 1px solid var(--line); } .mn-nav__mobile-sub { padding-inline-start: 16px; } .mn-nav__mobile-sub a { font-weight: 500; color: var(--ink-soft); border: none; padding-block: 8px; } .mn-nav__mobile-cta { margin-block-start: 14px; } @media (max-width: 900px) { .mn-nav__links { display: none; } .mn-nav__burger { display: flex; } } @media (max-width: 560px) { .mn-nav__aside .mn-btn { display: none; } } /* ========================== ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ (.mn-page-head) Общий баннер title+intro для всех страниц кроме главной. ========================== */ .mn-page-head { background: linear-gradient(160deg, var(--sage) 0%, var(--sage-dark) 100%); color: var(--white); padding-block: 64px; text-align: center; } .mn-page-head .mn-eyebrow { color: var(--gold-light); } .mn-page-head h1 { color: var(--white); margin-block-end: 12px; } .mn-page-head p { color: rgba(255,255,255,0.85); max-width: 620px; margin-inline: auto; } /* ========================== HERO ========================== */ .mn-hero { display: grid; grid-template-columns: 2fr 1fr; min-height: 640px; } .mn-hero__media { position: relative; overflow: hidden; } .mn-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .mn-hero__panel { background: var(--sage); color: var(--white); display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 72px); gap: 22px; } .mn-hero__panel h1 { color: var(--white); } .mn-hero__panel p { color: rgba(255,255,255,0.9); font-size: 1.05rem; max-width: 46ch; } .mn-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 10px; } @media (max-width: 900px) { .mn-hero { grid-template-columns: 1fr; min-height: 0; } .mn-hero__media { height: 320px; } } /* ========================== КАРТОЧКИ / СЕТКИ ========================== */ .mn-grid { display: grid; gap: 28px; } .mn-grid--2 { grid-template-columns: repeat(2, 1fr); } .mn-grid--3 { grid-template-columns: repeat(3, 1fr); } .mn-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .mn-grid--3, .mn-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mn-grid--2, .mn-grid--3, .mn-grid--4 { grid-template-columns: 1fr; } } .mn-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; } .mn-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .mn-card__media { aspect-ratio: 4 / 3; overflow: hidden; } .mn-card__media img { width: 100%; height: 100%; object-fit: cover; } .mn-card__body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .mn-card__price { color: var(--gold); font-weight: 700; font-size: 1.1rem; } .mn-card__link { margin-block-start: auto; font-weight: 700; color: var(--sage-dark); display: inline-flex; align-items: center; gap: 6px; } .mn-card__link .mn-arrow { transition: transform 0.2s ease; } .mn-card__link:hover .mn-arrow { transform: translateX(4px); } .mn-lang-he .mn-card__link:hover .mn-arrow { transform: translateX(-4px); } /* ========================== СПИСКИ "ПОКАЗАНИЯ / ПРОТИВОПОКАЗАНИЯ" (.mn-check-list) ========================== */ .mn-check-list { display: flex; flex-direction: column; gap: 14px; } .mn-check-list li { display: flex; gap: 12px; align-items: flex-start; } .mn-check-list__icon { width: 26px; height: 26px; border-radius: 50%; background: var(--sage); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; margin-block-start: 2px; } .mn-check-list--x .mn-check-list__icon { background: #c96a5a; } /* ========================== ВЫДЕЛЕННАЯ ВРЕЗКА (.mn-callout) Итоговая рекомендация в конце описания услуги ("Подходит тем, кто..."). ========================== */ .mn-callout { background: var(--white); border-inline-start: 4px solid var(--gold); border-radius: var(--radius-sm); padding: 20px 24px; font-style: italic; color: var(--ink-soft); box-shadow: var(--shadow-sm); } /* ========================== ЦЕНЫ / ТАБЛИЦА ========================== */ .mn-price-table { width: 100%; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .mn-price-table th, .mn-price-table td { padding: 18px 24px; text-align: start; border-block-end: 1px solid var(--line); } .mn-price-table th { background: var(--sage); color: var(--white); font-family: var(--font-head); font-size: 1rem; font-weight: 600; } .mn-lang-he .mn-price-table th { font-family: var(--font-head-he); } .mn-price-table tr:last-child td { border-block-end: none; } .mn-price-table td.mn-price-table__amount { font-weight: 700; color: var(--gold); white-space: nowrap; } .mn-price-table tbody tr:hover { background: var(--cream); } .mn-price-group-title { margin-block: 44px 16px; } .mn-price-group-title:first-child { margin-block-start: 0; } /* ========================== FAQ АККОРДЕОН ========================== */ .mn-faq { display: flex; flex-direction: column; gap: 14px; max-width: 820px; margin-inline: auto; } .mn-faq__item { background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; } .mn-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 700; font-size: 1.02rem; text-align: start; } .mn-faq__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--cream-deep); display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, background 0.25s ease; font-weight: 700; color: var(--sage-dark); } .mn-faq__item--open .mn-faq__icon { transform: rotate(45deg); background: var(--gold); color: var(--white); } .mn-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .mn-faq__answer-inner { padding: 0 24px 22px; color: var(--ink-soft); } /* ========================== ОТЗЫВЫ ========================== */ .mn-review-card { background: var(--white); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; } .mn-review-card__stars { color: var(--gold); letter-spacing: 2px; } .mn-review-card__text { color: var(--ink-soft); font-style: italic; } .mn-review-card__author { display: flex; align-items: center; gap: 12px; margin-block-start: auto; } .mn-review-card__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--sage-light); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-head); flex-shrink: 0; } .mn-review-card__name { font-weight: 700; } .mn-review-card__date { font-size: 0.8rem; color: var(--ink-soft); } /* ========================== КОНТАКТЫ / ФОРМА ========================== */ .mn-contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 44px; align-items: start; } @media (max-width: 900px) { .mn-contact-grid { grid-template-columns: 1fr; } } .mn-contact-info { display: flex; flex-direction: column; gap: 22px; } .mn-contact-info__item { display: flex; gap: 14px; align-items: flex-start; } .mn-contact-info__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--sage); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; } .mn-contact-info__label { font-weight: 700; margin-block-end: 4px; } .mn-contact-info__map { margin-block-start: 8px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: var(--cream-deep); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); padding: 20px; border: 1px dashed var(--line); } .mn-form { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 16px; } .mn-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px) { .mn-form__row { grid-template-columns: 1fr; } } .mn-form label { font-size: 0.85rem; font-weight: 700; margin-block-end: 6px; display: block; } .mn-form input, .mn-form textarea { width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--cream); transition: border-color 0.2s ease; } .mn-form input:focus, .mn-form textarea:focus { outline: none; border-color: var(--sage); } .mn-form textarea { min-height: 130px; resize: vertical; } .mn-form__note { font-size: 0.8rem; color: var(--ink-soft); } /* ========================== ПОДВАЛ (.mn-footer) ========================== */ .mn-footer { background: var(--sage-darker); color: rgba(255,255,255,0.85); padding-block-start: 64px; } .mn-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-block-end: 40px; border-block-end: 1px solid rgba(255,255,255,0.15); } @media (max-width: 900px) { .mn-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .mn-footer__grid { grid-template-columns: 1fr; } } .mn-footer__brand { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; } .mn-footer__brand img { height: 48px; width: 48px; object-fit: contain; } .mn-footer__brand-text { font-family: var(--font-head); font-size: 1.15rem; color: var(--white); font-weight: 700; } .mn-lang-he .mn-footer__brand-text { font-family: var(--font-head-he); } .mn-footer__heading { color: var(--white); font-size: 0.95rem; font-weight: 700; margin-block-end: 16px; text-transform: uppercase; letter-spacing: 0.06em; } .mn-footer__links { display: flex; flex-direction: column; gap: 10px; } .mn-footer__links a:hover { color: var(--gold-light); } .mn-footer__social { display: flex; gap: 10px; margin-block-start: 16px; } .mn-footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; } .mn-footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } .mn-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-block: 22px; font-size: 0.82rem; color: rgba(255,255,255,0.6); } /* ========================== ЖУРНАЛ (.zh-*) Паттерн 2-колоночной раскладки (основной контент + сайдбар) взят из темы sovushata (single-statya.php: .zh-layout), адаптирован под палитру этой темы через переопределение --zh-* токенов вместо фиолетово-коралловых. ========================== */ .zhurnal-page { --zh-accent: var(--sage); --zh-accent-dark: var(--sage-dark); --zh-gold: var(--gold); --zh-cream: var(--cream); --zh-ink: var(--ink); --zh-line: var(--line); max-width: var(--container); margin-inline: auto; padding: 40px 24px 90px; } .zh-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; } @media (max-width: 900px) { .zh-layout { grid-template-columns: 1fr; } } .zh-featured { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); margin-block-end: 34px; color: var(--white); } .zh-featured img { width: 100%; height: 380px; object-fit: cover; } .zh-featured__body { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 30px; background: linear-gradient(0deg, rgba(47,42,31,0.9), transparent); } .zh-featured__body h2 { color: var(--white); } .zh-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; } @media (max-width: 560px) { .zh-cards { grid-template-columns: 1fr; } } .zh-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s ease; } .zh-card:hover { transform: translateY(-4px); } .zh-card__thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--cream-deep); } .zh-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .zh-card__body { padding: 20px; } .zh-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--cream-deep); color: var(--sage-dark); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-block-end: 10px; } .zh-meta { font-size: 0.8rem; color: var(--ink-soft); margin-block-start: 8px; } .zh-side { display: flex; flex-direction: column; gap: 22px; } .zh-side-sticky { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; } .zh-side-block { background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 22px; } .zh-side-block__title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin-block-end: 14px; color: var(--sage-darker); } .mn-lang-he .zh-side-block__title { font-family: var(--font-head-he); } .zh-weather { display: flex; align-items: center; gap: 14px; } .zh-weather__emoji { font-size: 2.4rem; } .zh-weather__temp { font-size: 1.7rem; font-weight: 700; font-family: var(--font-head); } .mn-lang-he .zh-weather__temp { font-family: var(--font-head-he); } .zh-weather__desc { font-size: 0.85rem; color: var(--ink-soft); } .zh-weather__tip { margin-block-start: 10px; font-size: 0.82rem; color: var(--sage-dark); background: var(--cream); border-radius: 8px; padding: 8px 12px; } .zh-top-list { display: flex; flex-direction: column; gap: 12px; } .zh-top-list__item { display: flex; gap: 12px; align-items: flex-start; } .zh-top-list__num { font-family: var(--font-head); font-weight: 700; color: var(--gold); font-size: 1.3rem; flex-shrink: 0; } .zh-top-list__title { font-size: 0.9rem; font-weight: 600; line-height: 1.35; } .zh-social-row { display: flex; gap: 10px; } .zh-social-row a { width: 38px; height: 38px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; } .zh-social-row a:hover { background: var(--sage); color: var(--white); } .zh-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 30px; } .zh-nav a { padding: 9px 16px; border-radius: 999px; background: var(--white); font-size: 0.88rem; font-weight: 600; box-shadow: var(--shadow-sm); } .zh-nav a.zh-nav__item--active, .zh-nav a:hover { background: var(--sage); color: var(--white); } .zh-article h2 { margin-block: 34px 14px; } .zh-article p { margin-block-end: 16px; } .zh-article ul, .zh-article ol { margin-block-end: 16px; padding-inline-start: 22px; list-style: disc; } .mn-lang-he .zh-article ul, .mn-lang-he .zh-article ol { list-style-position: inside; } .zh-empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 40px; text-align: center; color: var(--ink-soft); } /* ========================== УТИЛИТЫ ========================== */ .mn-center { text-align: center; } .mn-mt-0 { margin-block-start: 0; } .mn-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 1024px) { .mn-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .mn-footer__bottom { justify-content: center; text-align: center; } .mn-contact-info__map { padding: 14px; } }