/* Three Chairs Group - site styles */ /* Fonts load via in each page's . */ :root { --cream: #f8f5f0; --white: #ffffff; --navy: #2c3e5a; --dusty-blue: #7a9ab5; --sage: #8fa88a; --warm-gray: #9c9489; --dark: #1e2530; --text: #3a3530; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Jost', sans-serif; background: var(--cream); color: var(--text); font-weight: 300; } nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(248,245,240,0.96); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(44,62,90,0.1); padding: 0 48px; display: flex; align-items: center; justify-content: space-between; height: 152px; } .nav-logo { display: flex; align-items: center; } .nav-logo img { height: 118px; width: auto; max-width: 280px; display: block; } .nav-links { display: flex; gap: 36px; list-style: none; } .nav-links a { text-decoration: none; color: var(--navy); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; transition: color 0.2s; } .nav-links a:hover { color: var(--dusty-blue); } .hero { height: 100vh; min-height: 600px; display: grid; grid-template-columns: 1fr 1fr; padding-top: 152px; } .hero-left { background: var(--navy); display: flex; flex-direction: column; justify-content: center; padding: 80px 64px; position: relative; overflow: hidden; } .hero-left::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: rgba(122,154,181,0.12); } .hero-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dusty-blue); margin-bottom: 24px; } .hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 5vw, 68px); font-weight: 300; color: var(--white); line-height: 1.1; margin-bottom: 28px; } .hero-title em { font-style: italic; color: var(--dusty-blue); } .hero-subtitle { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.7; max-width: 380px; margin-bottom: 48px; } .hero-cta { display: inline-block; padding: 14px 36px; border: 1px solid rgba(255,255,255,0.4); color: var(--white); text-decoration: none; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.3s; align-self: flex-start; } .hero-cta:hover { background: var(--white); color: var(--navy); border-color: var(--white); } .hero-right { position: relative; overflow: hidden; } .hero-right img { width: 100%; height: 100%; object-fit: cover; } .intro-strip { background: var(--white); padding: 60px 80px; display: flex; align-items: center; gap: 80px; border-bottom: 1px solid rgba(44,62,90,0.08); } .intro-strip p { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; font-style: italic; color: var(--navy); line-height: 1.6; flex: 1; } .intro-stats { display: flex; gap: 60px; flex-shrink: 0; } .stat { text-align: center; } .stat-num { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; color: var(--navy); display: block; } .stat-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--warm-gray); display: block; margin-top: 4px; } .section-header { text-align: center; padding: 80px 48px 48px; } .section-eyebrow { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dusty-blue); margin-bottom: 16px; } .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 4vw, 52px); font-weight: 300; color: var(--navy); line-height: 1.2; } .properties { padding: 0 48px 100px; display: flex; flex-direction: column; gap: 80px; } .property-card { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; background: var(--white); box-shadow: 0 4px 40px rgba(30,37,48,0.07); overflow: hidden; } .property-card.reverse .property-img { order: 2; } .property-card.reverse .property-content { order: 1; } .property-img { position: relative; overflow: hidden; } .property-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .property-badge { position: absolute; top: 24px; left: 24px; background: var(--navy); color: var(--white); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 14px; } .property-badge.coming-soon { background: var(--warm-gray); } .property-content { padding: 56px; display: flex; flex-direction: column; justify-content: center; } .property-location { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dusty-blue); margin-bottom: 16px; } .property-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 3vw, 44px); font-weight: 300; color: var(--navy); line-height: 1.15; margin-bottom: 20px; } .property-desc { font-size: 15px; line-height: 1.75; color: var(--warm-gray); margin-bottom: 32px; } .property-details { display: flex; gap: 32px; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(44,62,90,0.08); } .detail { display: flex; flex-direction: column; gap: 4px; } .detail-val { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--navy); } .detail-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--warm-gray); } .property-links { display: flex; gap: 16px; flex-wrap: wrap; } .btn-primary { padding: 13px 28px; background: var(--navy); color: var(--white); text-decoration: none; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s; display: inline-block; } .btn-primary:hover { background: var(--dusty-blue); } .btn-secondary { padding: 13px 28px; border: 1px solid var(--navy); color: var(--navy); text-decoration: none; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.2s; display: inline-block; } .btn-secondary:hover { background: var(--navy); color: var(--white); } .palm-grid { display: grid; gap: 12px; margin-top: 24px; } .palm-grid-3 { grid-template-columns: repeat(3, 1fr); } .palm-grid-2 { grid-template-columns: repeat(2, 1fr); } .palm-mini { position: relative; overflow: hidden; height: 160px; } .palm-mini img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .palm-mini-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(30,37,48,0.8)); padding: 20px 12px 10px; color: var(--white); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; } .palm-mini-label a { color: white; text-decoration: none; } .maritime-placeholder { background: linear-gradient(135deg, #1e2530 0%, #2c3e5a 100%); display: flex; align-items: center; justify-content: center; } .placeholder-inner { text-align: center; color: white; padding: 40px; } .placeholder-glyph { font-family: 'Cormorant Garamond', serif; font-size: 80px; font-weight: 300; opacity: 0.2; line-height: 1; } .placeholder-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; margin-top: 12px; } footer { background: var(--dark); color: rgba(255,255,255,0.6); padding: 60px 80px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .footer-logo img { height: 120px; width: auto; filter: brightness(0) invert(1); opacity: 0.7; } .footer-text { font-size: 13px; line-height: 1.6; text-align: center; } .footer-contact { text-align: center; font-size: 13px; } .footer-contact a { color: var(--dusty-blue); text-decoration: none; } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero-eyebrow { animation: fadeUp 0.6s ease both; } .hero-title { animation: fadeUp 0.6s 0.15s ease both; } .hero-subtitle { animation: fadeUp 0.6s 0.25s ease both; } .hero-cta { animation: fadeUp 0.6s 0.35s ease both; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; height: auto; } .hero-right { height: 55vw; } .hero-left { padding: 60px 32px; } .property-card { grid-template-columns: 1fr; } .property-card.reverse .property-img { order: 0; } .property-card.reverse .property-content { order: 0; } .property-img { height: 280px; } .property-content { padding: 36px 28px; } .intro-strip { flex-direction: column; padding: 48px 28px; gap: 40px; } .intro-stats { gap: 32px; } .properties { padding: 0 20px 60px; } .section-header { padding: 60px 24px 36px; } nav { padding: 0 20px; height: 100px; } .nav-logo img { height: 80px; } .nav-links { display: none; } footer { flex-direction: column; gap: 28px; text-align: center; padding: 48px 28px; } .footer-contact { text-align: center; } .palm-grid-2 { grid-template-columns: 1fr 1fr; } } /* ============================================================ MULTI-PAGE ADDITIONS Everything above this line is your original site styling, lifted out of the old single HTML file unchanged. Everything below was added for the new multi-page structure. ============================================================ */ /* --- Nav: Book button + mobile menu --------------------------------- */ .nav-right { display: flex; align-items: center; gap: 36px; flex-wrap: nowrap; } /* Locked literal color + higher specificity so the links can never inherit a light color from anywhere. They must read navy on the cream bar. */ nav .nav-links a { color: #2c3e5a; } nav .nav-links a:hover { color: #7a9ab5; } .nav-cta { padding: 11px 26px; background: var(--navy); color: var(--white); text-decoration: none; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s; white-space: nowrap; } .nav-cta:hover { background: var(--dusty-blue); } .nav-links a.active { color: var(--dusty-blue); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: 0.3s; } .mobile-menu { display: none; position: fixed; top: 100px; left: 0; right: 0; z-index: 99; background: var(--cream); border-bottom: 1px solid rgba(44,62,90,0.1); flex-direction: column; padding: 16px 24px; } .mobile-menu.open { display: flex; } .mobile-menu a { padding: 14px 0; text-decoration: none; color: var(--navy); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid rgba(44,62,90,0.07); } .mobile-menu a.mm-book { color: var(--white); background: var(--navy); text-align: center; margin-top: 12px; border: none; } /* --- Generic page top spacing (clears the fixed nav) ---------------- */ .page-top { padding-top: 170px; } /* --- Index: featured teaser cards ----------------------------------- */ .featured { padding: 0 48px 90px; max-width: 1200px; margin: 0 auto; } .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .featured-card { background: var(--white); box-shadow: 0 4px 30px rgba(30,37,48,0.06); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; } .featured-card:hover { transform: translateY(-4px); box-shadow: 0 12px 44px rgba(30,37,48,0.13); } .featured-img { height: 220px; overflow: hidden; position: relative; } .featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .featured-card:hover .featured-img img { transform: scale(1.05); } .featured-tag { position: absolute; top: 16px; left: 16px; background: var(--navy); color: var(--white); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; padding: 5px 11px; } .featured-tag.soon { background: var(--dusty-blue); } .featured-body { padding: 24px 26px 28px; } .featured-loc { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dusty-blue); margin-bottom: 8px; } .featured-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--navy); line-height: 1.15; margin-bottom: 10px; } .featured-link { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); } .featured-cta-row { text-align: center; margin-top: 52px; } /* --- Status CTAs (Notify) + 2x2 grid -------------------------------- */ .btn-notify { padding: 13px 28px; border: 1px solid var(--dusty-blue); color: var(--dusty-blue); text-decoration: none; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.2s; display: inline-block; } .btn-notify:hover { background: var(--dusty-blue); color: var(--white); } .property-badge.transitioning { background: var(--dusty-blue); } .palm-grid-4 { grid-template-columns: repeat(2, 1fr); } .palm-mini.is-soon { background: var(--navy); display: flex; align-items: center; justify-content: center; } .palm-mini-soon { text-align: center; color: rgba(255,255,255,0.7); padding: 14px; } .palm-mini-soon .ms-name { font-family: 'Cormorant Garamond', serif; font-size: 16px; margin-bottom: 5px; color: rgba(255,255,255,0.85); } .palm-mini-soon .ms-when { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; } .palm-mini-soon a { color: var(--dusty-blue); text-decoration: none; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; display: inline-block; margin-top: 8px; } /* --- Transformation story (Harbor -> Maritime) ---------------------- */ .transformation { background: var(--navy); color: var(--white); padding: 90px 48px; } .transformation-inner { max-width: 1100px; margin: 0 auto; } .transformation .section-eyebrow { color: var(--dusty-blue); text-align: center; } .transformation h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px,4vw,46px); font-weight: 300; color: var(--white); text-align: center; line-height: 1.2; margin-bottom: 18px; } .transformation-lede { text-align: center; max-width: 620px; margin: 0 auto 56px; font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.7); } .lifecycle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 60px; } .lifecycle-step { text-align: center; } .lifecycle-num { font-family: 'Cormorant Garamond', serif; font-size: 40px; color: var(--dusty-blue); display: block; margin-bottom: 10px; } .lifecycle-step h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; color: var(--white); margin-bottom: 10px; } .lifecycle-step p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.6); } .beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 900px; margin: 0 auto; } .ba-frame { position: relative; height: 300px; background: #243349; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ba-frame img { width: 100%; height: 100%; object-fit: cover; } .ba-tag { position: absolute; top: 16px; left: 16px; background: rgba(0,0,0,0.45); color: var(--white); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 12px; } .ba-placeholder { text-align: center; color: rgba(255,255,255,0.45); padding: 20px; } .ba-placeholder .ph-glyph { font-family: 'Cormorant Garamond', serif; font-size: 50px; opacity: 0.55; line-height: 1; } .ba-placeholder .ph-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 10px; } /* --- About page ----------------------------------------------------- */ .about-hero { padding: 170px 48px 30px; text-align: center; max-width: 760px; margin: 0 auto; } .about-body { max-width: 720px; margin: 0 auto; padding: 20px 48px 40px; } .about-block { margin-bottom: 44px; } .about-block .ab-eyebrow { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dusty-blue); margin-bottom: 14px; } .about-block h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 30px; color: var(--navy); margin-bottom: 16px; line-height: 1.2; } .about-block p { font-size: 16px; line-height: 1.9; color: var(--text); } .about-stats { display: flex; justify-content: center; gap: 64px; padding: 30px 48px 90px; } /* --- Contact page --------------------------------------------------- */ .contact-wrap { max-width: 720px; margin: 0 auto; padding: 170px 48px 70px; text-align: center; } .contact-lede { font-size: 16px; line-height: 1.8; color: var(--warm-gray); max-width: 540px; margin: 18px auto 0; } .contact-methods { display: flex; flex-direction: column; gap: 14px; align-items: center; margin: 44px 0; } .contact-methods a { color: var(--navy); text-decoration: none; font-size: 16px; } .contact-methods a:hover { color: var(--dusty-blue); } .contact-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-gray); } /* --- Compact site footer (shared) ----------------------------------- */ .footer-eyebrow { margin-bottom: 8px; color: rgba(255,255,255,0.35); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; } .footer-copy { color: rgba(255,255,255,0.3); font-size: 12px; } .footer-links { display: flex; gap: 26px; } .footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } .footer-links a:hover { color: var(--dusty-blue); } .footer-getintouch { display: inline-block; padding: 13px 36px; border: 1px solid rgba(255,255,255,0.4); color: var(--white); text-decoration: none; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; } .footer-getintouch:hover { background: var(--white); color: var(--navy); } /* --- Responsive additions ------------------------------------------- */ @media (max-width: 900px) { .nav-toggle { display: block; } .nav-right { gap: 16px; } .featured { padding: 0 20px 60px; } .featured-grid { grid-template-columns: 1fr; gap: 22px; } .lifecycle { grid-template-columns: 1fr; gap: 36px; } .beforeafter { grid-template-columns: 1fr; } .transformation { padding: 64px 24px; } .about-stats { gap: 36px; } } @media (max-width: 600px) { .nav-cta { display: none; } } /* --- Blog index ----------------------------------------------------- */ .blog { max-width: 1100px; margin: 0 auto; padding: 10px 48px 90px; } .blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; } .blog-card { background: var(--white); box-shadow: 0 4px 30px rgba(30,37,48,0.06); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 44px rgba(30,37,48,0.13); } .blog-card-img { height: 260px; overflow: hidden; } .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .blog-card:hover .blog-card-img img { transform: scale(1.04); } .blog-card-body { padding: 28px 30px 32px; } .blog-card-meta { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-gray); margin-bottom: 12px; } .blog-card-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 300; color: var(--navy); line-height: 1.15; margin-bottom: 14px; } .blog-card-excerpt { font-size: 15px; line-height: 1.7; color: var(--warm-gray); margin-bottom: 18px; } .blog-card-link { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); } /* --- Article (single blog post) ------------------------------------- */ .article { max-width: 780px; margin: 0 auto; } .article-head { padding: 170px 48px 28px; text-align: center; } .article-meta { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-gray); margin-top: 18px; } .article-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px,4.5vw,54px); font-weight: 300; color: var(--navy); line-height: 1.15; } .article-hero-img { padding: 0 48px; margin-bottom: 44px; } .article-hero-img img { width: 100%; height: 400px; object-fit: cover; } .article-body { padding: 0 48px; } .article-body p { font-size: 17px; line-height: 1.95; color: var(--text); margin-bottom: 24px; } .article-body p.lead { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: var(--navy); line-height: 1.55; } .article-body h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 30px; color: var(--navy); margin: 40px 0 16px; } .article-note { font-size: 13px; color: var(--warm-gray); font-style: italic; text-align: center; margin-top: 14px; } .article-back { text-align: center; padding: 50px 48px 90px; } /* Light-background before/after used inside an article */ .beforeafter.light { margin-top: 12px; } .beforeafter.light .ba-frame { border: 1px solid rgba(44,62,90,0.1); } .ba-room { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--navy); text-align: center; margin: 40px 0 0; } @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; gap: 26px; } .blog { padding: 10px 20px 60px; } .article-head { padding: 150px 24px 24px; } .article-hero-img, .article-body, .article-back { padding-left: 24px; padding-right: 24px; } .article-hero-img img { height: 260px; } } /* --- Per-property page + photo gallery ------------------------------ */ .pp-head { max-width: 1100px; margin: 0 auto; padding: 170px 48px 26px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 22px; } .pp-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px,4.5vw,52px); font-weight: 300; color: var(--navy); line-height: 1.1; margin: 8px 0 18px; } .pp-head .property-details { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .pp-about { max-width: 1100px; margin: 36px auto 0; padding: 0 48px; } .pp-about p { font-size: 16px; line-height: 1.9; color: var(--text); max-width: 720px; } .gallery { max-width: 1100px; margin: 0 auto; padding: 0 48px; } .g-hero { display: block; position: relative; overflow: hidden; } .g-hero img { width: 100%; height: 520px; object-fit: cover; display: block; } .g-hero .g-expand { position: absolute; bottom: 16px; right: 16px; background: rgba(44,62,90,0.85); color: var(--white); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 14px; } .g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; } .g-item { display: block; position: relative; overflow: hidden; cursor: pointer; } .g-grid .g-item img { width: 100%; height: 155px; object-fit: cover; display: block; transition: transform 0.4s; } .g-hidden { display: none; } .g-more { position: absolute; inset: 0; background: rgba(44,62,90,0.74); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .g-more .n { font-family: 'Cormorant Garamond', serif; font-size: 30px; } .g-more .l { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } .g-cap { text-align: center; font-size: 12px; letter-spacing: 0.04em; color: var(--warm-gray); margin-top: 16px; } /* Lightbox */ .lb { position: fixed; inset: 0; z-index: 1000; background: rgba(20,25,35,0.96); display: none; align-items: center; justify-content: center; } .lb.open { display: flex; } .lb img { max-width: 90vw; max-height: 84vh; object-fit: contain; } .lb button { position: absolute; background: none; border: none; color: var(--white); cursor: pointer; line-height: 1; } .lb-close { top: 20px; right: 26px; font-size: 34px; } .lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 46px; padding: 16px 22px; } .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-count { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.8); font-size: 12px; letter-spacing: 0.16em; } @media (max-width: 900px) { .pp-head { padding: 150px 24px 22px; } .pp-about, .gallery { padding-left: 24px; padding-right: 24px; } .g-hero img { height: 300px; } .g-grid { grid-template-columns: repeat(2, 1fr); } .g-grid .g-item img { height: 130px; } }