/* ========================================================== PRIVATE APARTMENTS RESPONSIVE STYLES ========================================================== */ /* ========================================================== LARGE TABLETS / SMALL LAPTOPS до 1199px ========================================================== */ @media (max-width: 1199px) { .section { padding: 95px 0; } .hero { min-height: auto; padding: 85px 0 95px; } .hero__title { font-size: clamp(44px, 6vw, 68px); } .advantages { gap: 16px; } .advantage { min-height: 175px; padding: 25px 16px; } .step-card { padding: 24px; } .discount__box { gap: 40px; padding: 45px; } .footer__grid { gap: 35px; } } /* ========================================================== TABLETS до 1023px ========================================================== */ @media (max-width: 1023px) { /* ------------------------------------------------------ CONTAINER ------------------------------------------------------ */ .container { width: min(calc(100% - 32px), 1200px); } /* ------------------------------------------------------ SECTION ------------------------------------------------------ */ .section { padding: 80px 0; } .section-heading { margin-bottom: 40px; } .section-heading__title { font-size: clamp(32px, 5vw, 46px); } /* ------------------------------------------------------ HEADER ------------------------------------------------------ */ .header { padding: 20px 0; } .header__logo { width: 24%; max-width: 190px; } /* ------------------------------------------------------ HERO ------------------------------------------------------ */ .hero { padding: 75px 0 85px; } .hero__title { max-width: 800px; font-size: clamp(42px, 7vw, 64px); } .hero__subtitle { max-width: 620px; } /* ------------------------------------------------------ ADVANTAGES ------------------------------------------------------ */ .advantages { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 55px; } .advantage { min-height: 165px; } /* ------------------------------------------------------ QUIZ ------------------------------------------------------ */ .quiz { padding: 32px; } .quiz-service-grid { grid-template-columns: repeat(2, 1fr); } .quiz-service-card:last-child { grid-column: 1 / -1; } /* ------------------------------------------------------ SLIDER ------------------------------------------------------ */ .apartment-card { flex: 0 0 calc((100% - 20px) / 2); } /* ------------------------------------------------------ STEPS ------------------------------------------------------ */ .steps { grid-template-columns: repeat(2, 1fr); } /* ------------------------------------------------------ REVIEWS ------------------------------------------------------ */ .reviews-grid { grid-template-columns: repeat(2, 1fr); } .review-card:last-child { grid-column: 1 / -1; } /* ------------------------------------------------------ DISCOUNT ------------------------------------------------------ */ .discount__box { grid-template-columns: 1fr; gap: 32px; } .discount-form { max-width: 520px; } /* ------------------------------------------------------ FOOTER ------------------------------------------------------ */ .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } .footer__brand { max-width: 100%; } } /* ========================================================== TABLETS / LARGE MOBILE до 767px ========================================================== */ @media (max-width: 767px) { /* ------------------------------------------------------ GLOBAL ------------------------------------------------------ */ body { font-size: 15px; } .container { width: min(calc(100% - 24px), 1200px); } .section { padding: 65px 0; } .section::before { width: calc(100% - 24px); } /* ------------------------------------------------------ SECTION HEADING ------------------------------------------------------ */ .section-heading { margin-bottom: 32px; } .section-heading__label { font-size: 11px; letter-spacing: 2.2px; } .section-heading__title { font-size: clamp(30px, 9vw, 40px); } .section-heading__description { margin-top: 14px; font-size: 15px; } /* ------------------------------------------------------ HEADER ------------------------------------------------------ */ .header { padding: 16px 0; } .header__container { gap: 20px; } .header__logo { width: 42%; max-width: 180px; min-width: 125px; } .burger { width: 48px; height: 48px; padding: 0 13px; } /* ------------------------------------------------------ MOBILE MENU ------------------------------------------------------ */ .mobile-menu { width: min(94vw, 420px); padding: 80px 28px 30px; } .mobile-menu__close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 29px; } .mobile-menu__list a { padding: 12px 0; font-size: 19px; } /* ------------------------------------------------------ HERO ------------------------------------------------------ */ .hero { padding: 58px 0 70px; } .hero__title { font-size: clamp(38px, 11vw, 56px); letter-spacing: -1.2px; } .hero__subtitle { margin-top: 18px; font-size: clamp(18px, 5vw, 23px); } /* ------------------------------------------------------ ADVANTAGES ------------------------------------------------------ */ .advantages { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 42px; } .advantage { min-height: 150px; padding: 20px 12px; } .advantage__icon { width: 48px; height: 48px; margin-bottom: 14px; } .advantage__icon img { max-width: 40px; max-height: 40px; } .advantage__text { font-size: 13px; line-height: 1.4; } /* ------------------------------------------------------ HERO BUTTON ------------------------------------------------------ */ .hero__button { width: 100%; margin-top: 30px; padding: 15px 20px; min-height: 58px; } /* ------------------------------------------------------ QUIZ ------------------------------------------------------ */ .quiz { padding: 24px; border-radius: 20px; } .quiz__progress { margin-bottom: 10px; } .quiz__progress-info { gap: 10px; font-size: 12px; } .quiz-step__heading { margin-bottom: 24px; } .quiz-step__heading h3 { font-size: 20px; } .quiz-service-grid { grid-template-columns: 1fr; gap: 14px; } .quiz-service-card:last-child { grid-column: auto; } .quiz-service-card { min-height: 190px; padding: 22px; } .quiz-service-card__title { margin-top: 0px; font-size: 22px; } .quiz__navigation { gap: 12px; margin-top: 28px; } .quiz__navigation .button { flex: 1; padding-inline: 16px; } /* ------------------------------------------------------ SLIDER ------------------------------------------------------ */ .apartments-slider { gap: 10px; } .slider-arrow { width: 44px; height: 44px; font-size: 18px; } .slider-track { gap: 14px; } .apartment-card { flex: 0 0 calc(100% - 42px); } .apartment-card__content { padding: 20px; } .apartment-card__title { font-size: 20px; } /* ------------------------------------------------------ EXTRAS ------------------------------------------------------ */ .extra { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; padding: 18px; } .extra__icon { width: 46px; height: 46px; } .extra__price { grid-column: 2 / 3; padding-left: 0; font-size: 16px; } .extra__checkbox { grid-column: 3 / 4; } .extra__content strong { font-size: 13px; } .extra__content span { font-size: 13px; } /* ------------------------------------------------------ STEPS ------------------------------------------------------ */ .steps { grid-template-columns: 1fr; gap: 14px; } .step-card { min-height: 210px; } .step-card__number { margin-bottom: 40px; } /* ------------------------------------------------------ REVIEWS ------------------------------------------------------ */ .reviews-grid { grid-template-columns: 1fr; gap: 14px; } .review-card:last-child { grid-column: auto; } .review-card { min-height: 240px; padding: 24px; } /* ------------------------------------------------------ DISCOUNT ------------------------------------------------------ */ .discount__box { padding: 30px 24px; border-radius: 20px; } .discount__title { font-size: clamp(29px, 9vw, 40px); } .discount-form { max-width: none; width: 100%; } /* ------------------------------------------------------ FOOTER ------------------------------------------------------ */ .footer { padding: 55px 0 25px; } .footer__grid { grid-template-columns: 1fr; gap: 32px; } .footer__brand { max-width: 280px; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 42px; } /* ------------------------------------------------------ MODAL ------------------------------------------------------ */ .modal { padding: 12px; } .modal__content { padding: 34px 22px 26px; border-radius: 20px; } .modal__heading { padding-right: 34px; } .modal__heading h2 { font-size: 27px; } .modal__close { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 25px; } } /* ========================================================== SMALL MOBILE до 479px ========================================================== */ @media (max-width: 479px) { /* ------------------------------------------------------ HEADER ------------------------------------------------------ */ .header__logo { width: 48%; } /* ------------------------------------------------------ HERO ------------------------------------------------------ */ .hero { padding: 48px 0 58px; } .hero__title { font-size: clamp(34px, 11vw, 46px); } .hero__subtitle { font-size: 18px; } /* ------------------------------------------------------ ADVANTAGES ------------------------------------------------------ */ .advantages { grid-template-columns: 1fr; gap: 10px; } .advantage { flex-direction: row; justify-content: flex-start; min-height: auto; padding: 18px; text-align: left; } .advantage__icon { flex: 0 0 auto; margin: 0 16px 0 0; } .advantage__text { max-width: none; font-size: 14px; } /* ------------------------------------------------------ BUTTON ------------------------------------------------------ */ .button { min-height: 52px; padding: 13px 18px; font-size: 14px; } /* ------------------------------------------------------ QUIZ ------------------------------------------------------ */ .quiz { padding: 20px 16px; } .quiz__progress-info { flex-direction: column; align-items: flex-start; } .quiz-service-card { min-height: 122px; padding: 20px; } .quiz-service-card__title { font-size: 18px; } .quiz-service-card__description { margin-top: 0px; font-size: 11px; } .quiz-service-card__arrow { bottom: 5px; } .quiz-service-card__description { max-width: 80%; } .quiz__navigation { flex-direction: column-reverse; } .quiz__navigation .button { width: 100%; } /* ------------------------------------------------------ SLIDER ------------------------------------------------------ */ .apartments-slider { display: block; } .slider-viewport { width: 100%; } .slider-track { gap: 12px; } .apartment-card { flex: 0 0 calc(100% - 32px); } .slider-arrow { position: absolute; z-index: 5; top: 50%; width: 42px; height: 42px; transform: translateY(-50%); background: rgba(21, 21, 21, 0.9); backdrop-filter: blur(8px); } .slider-arrow:hover { transform: translateY(-50%) scale(1.05); } .slider-arrow--prev { left: 8px; } .slider-arrow--next { right: 8px; } /* ------------------------------------------------------ EXTRA OPTIONS ------------------------------------------------------ */ .extra { grid-template-columns: 42px minmax(0, 1fr) 26px; gap: 12px; padding: 16px 14px; } .extra__icon { width: 42px; height: 42px; } .extra__price { grid-column: 2 / 3; font-size: 15px; } .extra__checkbox { width: 24px; height: 24px; } .extra__checkbox::after { top: 4px; left: 7px; } /* ------------------------------------------------------ DISCOUNT ------------------------------------------------------ */ .discount__box { padding: 26px 18px; } /* ------------------------------------------------------ FOOTER ------------------------------------------------------ */ .footer__logo { width: 170px; } /* ------------------------------------------------------ MODAL ------------------------------------------------------ */ .modal__content { padding: 30px 18px 22px; } .modal__heading h2 { font-size: 24px; } .booking-form { margin-top: 24px; } } /* ========================================================== VERY SMALL MOBILE до 359px ========================================================== */ @media (max-width: 359px) { .container { width: calc(100% - 20px); } .hero__title { font-size: 32px; } .section-heading__title { font-size: 28px; } .mobile-menu { width: 100%; } .quiz { padding: 18px 12px; } .quiz-service-card { padding: 18px; } .extra { padding: 14px 12px; } }