/* gw_feature_block — image + copy split (Homepage §9 "Homes That Start Ahead", 1:278/1:286; Builders "The People Behind The Place", 1:1351/1:1352). Both Figma instances put the photo on the left, copy on the right, at roughly a 1:1 column split with a content-margin gutter; DOM keeps media first so mobile stacks image-then-copy for free, desktop flips order per side. */ .gw-feature--cream { background: var(--gw-surface-page); } .gw-feature--sand { background: var(--gw-surface-alt); } .gw-feature__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--gw-space-5); padding: var(--gw-fluid-space-section) var(--gw-fluid-margin-content); } .gw-feature + .gw-feature .gw-feature__inner { padding-top: calc(var(--gw-fluid-space-section) / 3); } /* back-to-back rows: 2/3 of the doubled section gap (Danny 2026-10-07) */ .gw-feature--image-left .gw-feature__media { order: 1; } .gw-feature--image-left .gw-feature__copy { order: 2; } .gw-feature--image-right .gw-feature__media { order: 2; } .gw-feature--image-right .gw-feature__copy { order: 1; } .gw-feature__photo { margin: 0; } .gw-feature:not(.gw-feature--collage) .gw-feature__photo { overflow: clip; } /* the scroll depth zoom (1.12 -> 1.04) stays inside the frame instead of spilling into the gutter */ /* Text-only rows (Builders 53:15-23, Home Detail 57:457): the photo takes the smaller column, centred against the whole copy block (eyebrow to logo), with a wider gutter between the two. */ .gw-feature--plain .gw-feature__inner { grid-template-columns: minmax(0, 11fr) minmax(0, 15fr); column-gap: clamp(48px, 8.3vw, 160px); } .gw-feature--plain.gw-feature--image-right .gw-feature__inner { grid-template-columns: minmax(0, 15fr) minmax(0, 11fr); } /* order flips the columns, not the track sizes */ .gw-feature__img { display: block; width: 100%; height: auto; border-radius: var(--gw-radius-square); box-shadow: none; } /* Builder logo under the photo, in the media column (Danny 2026-10-07; the comp 53:23 had it under the copy's pill): centred under the photo (Danny 2026-10-14), 20px below it, a touch smaller than the comp's 525-622px. Privada's art has a baked white ground. */ .gw-feature__logo { margin: 20px auto 0; max-width: clamp(200px, 26vw, 500px); } .gw-feature__logo-img { display: block; width: 100%; height: auto; max-height: 160px; margin: 0 auto; object-fit: contain; object-position: center; } .gw-feature__logo-img--privada { mix-blend-mode: multiply; max-width: clamp(180px, 22vw, 420px); } /* 53:23 */ /* People row: sits under the photo, inside the media column. Figma shows one shared group photo with two name/role columns beneath it (no per-person crop), so this is a plain responsive grid, not a card carousel. */ .gw-feature__people { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gw-space-3); margin: var(--gw-space-4) 0 0; padding: 0; list-style: none; } .gw-team-card { list-style: none; } /* Salient forces li bullets: reset on the li itself. */ .gw-team-card__photo { aspect-ratio: 1; overflow: hidden; border-radius: var(--gw-radius-square); margin: 0 0 var(--gw-space-2); } .gw-team-card__img { display: block; width: 100%; height: 100%; object-fit: cover; } .gw-team-card__name { margin: 0 0 var(--gw-space-1); color: var(--gw-text-primary); } .gw-feature .gw-team-card__name.gw-heading-l { font-size: clamp(16px, 1.3vw, 25px) !important; white-space: nowrap; } /* names on one line (feedback card 10) */ /* "DEVELOPER" in the comp measures 22px / 0.15em tracking — the fluid-label-l size with the heading tracking. No existing utility combines those two, so it lives here rather than as a new shared class in tokens.css. */ .gw-team-card__role { margin: 0; font-family: var(--gw-font-display); font-weight: 600; line-height: 1; text-transform: uppercase; font-size: var(--gw-fluid-label-l); letter-spacing: var(--gw-track-heading); color: var(--gw-text-primary); } /* Collage (Location "Move Closer", 472:1473-1477): 586x723 photo with an orange cut-out over its top left corner and a 251x377 citron-framed inset hanging off its lower right; copy column from x837; a second cut-out at the section's lower right. */ .gw-feature { position: relative; } .gw-feature--collage .gw-feature__inner { grid-template-columns: minmax(0, 586fr) minmax(0, 962fr); column-gap: clamp(32px, 6.77vw, 130px); align-items: start; padding: clamp(96px, 9.74vw, 187px) clamp(24px, 6.3vw, 121px) clamp(96px, 14.4vw, 276px); } /* the copy column (826) is taller than the photo (723): footer 276 below the pill */ .gw-feature--collage .gw-feature__photo { position: relative; aspect-ratio: 586 / 723; } .gw-feature--collage .gw-feature__img { height: 100% !important; object-fit: cover; } .gw-feature--collage .gw-feature__copy { padding-top: clamp(0px, 0.73vw, 14px); max-width: clamp(320px, 46vw, 884px); } .gw-feature--collage .gw-intro__body { max-width: clamp(280px, 37vw, 710px); } .gw-feature--collage .gw-intro__kicker { max-width: clamp(280px, 35.1vw, 674px); margin: 0; } .gw-feature__sticker { position: absolute; z-index: 2; display: block; line-height: 0; pointer-events: none; } .gw-feature__sticker img { display: block; width: 100%; height: auto !important; } .gw-feature__sticker--media { left: -5.6%; top: -29.7%; width: 55.3%; } /* 324 on 586, 33 left / 215 above */ .gw-feature__inset { position: absolute; z-index: 1; left: 68.8%; top: 74.3%; width: 42.8%; aspect-ratio: 251 / 377; display: block; overflow: hidden; box-sizing: border-box; border: clamp(5px, 0.55vw, 10.5px) solid var(--gw-citron-400); } /* the comp's citron frame (472:1475); it was baked into the first exported inset, the sourced photo (619) needs it from CSS */ .gw-feature__inset-img { display: block; width: 100%; height: 100% !important; object-fit: cover; } .gw-feature__sticker--copy { right: clamp(8px, 2.08vw, 40px); bottom: clamp(48px, 6.5vw, 125px); width: clamp(120px, 19.95vw, 383px); } /* Section label + rule (Home "Design Difference", 472:1940 / 472:1939): 22px label at x178, a 275px rule from x509 on its centre line, 139px above the image. With it the block takes the comp's columns: 696 image from x146, copy 776 from x960, 184 right margin (472:1949 / 472:1941). */ .gw-feature__label { display: flex; align-items: center; margin: 0; padding: var(--gw-fluid-space-section) var(--gw-fluid-margin-content) 0 clamp(24px, 9.27vw, 178px); color: var(--gw-text-primary); } .gw-feature__label::after { content: ""; flex: 0 0 auto; width: clamp(72px, 14.32vw, 275px); margin-left: clamp(24px, 5.6vw, 107px); border-top: var(--gw-stroke-rule) solid var(--gw-rule); } .gw-feature--labelled .gw-feature__inner { grid-template-columns: minmax(0, 696fr) minmax(0, 776fr); column-gap: clamp(32px, 6.15vw, 118px); padding-top: clamp(40px, 7.24vw, 139px); padding-left: clamp(24px, 7.6vw, 146px); } @media (max-width: 999px) { .gw-feature--collage .gw-feature__inner { grid-template-columns: 1fr; padding: var(--gw-space-7) var(--gw-fluid-margin-content) var(--gw-space-6); row-gap: clamp(96px, 30vw, 160px); } .gw-feature--collage .gw-feature__copy { max-width: none; } .gw-feature--collage .gw-intro__body, .gw-feature--collage .gw-intro__kicker { max-width: none; } .gw-feature--collage .gw-feature__media { max-width: 78%; } .gw-feature__sticker--copy { display: none; } .gw-feature__inner, .gw-feature--labelled .gw-feature__inner, .gw-feature--plain .gw-feature__inner, .gw-feature--plain.gw-feature--image-right .gw-feature__inner { grid-template-columns: 1fr; column-gap: var(--gw-space-5); } /* the image-right plain selector has three classes and must be named here or it outranks the stack */ .gw-feature--labelled .gw-feature__inner { padding-left: var(--gw-fluid-margin-content); } .gw-feature__label { padding-left: var(--gw-fluid-margin-content); } .gw-feature--image-left .gw-feature__media, .gw-feature--image-left .gw-feature__copy, .gw-feature--image-right .gw-feature__media, .gw-feature--image-right .gw-feature__copy { order: initial; } } /* Home Features block on the Privada Home Detail fragment (feedback card 20): the body carries a bullet list. */ .gw-feature--features .gw-intro__body ul { margin: 0 0 1.2em; padding: 0 0 0 1.1em; list-style: disc; } .gw-feature--features .gw-intro__body li { margin: 0 0 0.35em; padding: 0; font-size: inherit; line-height: inherit; font-weight: inherit; list-style: disc; break-inside: avoid; } /* same size / weight as the body copy (Danny 2026-10-07) */ @media (min-width: 1000px) { .gw-feature--features .gw-intro__body ul { columns: 2; column-gap: clamp(32px, 4vw, 80px); column-fill: auto; } /* Split by COUNT, not height: items 1..ceil(n/2) left, the rest right (the odd one lands on the left). Chrome balances multicol by height, so the break is forced on item ceil(n/2)+1 for 3-20 items. */ .gw-feature--features .gw-intro__body ul:has(> li:nth-child(3):last-child) > li:nth-child(3) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(4):last-child) > li:nth-child(3) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(5):last-child) > li:nth-child(4) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(6):last-child) > li:nth-child(4) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(7):last-child) > li:nth-child(5) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(8):last-child) > li:nth-child(5) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(9):last-child) > li:nth-child(6) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(10):last-child) > li:nth-child(6) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(11):last-child) > li:nth-child(7) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(12):last-child) > li:nth-child(7) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(13):last-child) > li:nth-child(8) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(14):last-child) > li:nth-child(8) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(15):last-child) > li:nth-child(9) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(16):last-child) > li:nth-child(9) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(17):last-child) > li:nth-child(10) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(18):last-child) > li:nth-child(10) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(19):last-child) > li:nth-child(11) { break-before: column; } .gw-feature--features .gw-intro__body ul:has(> li:nth-child(20):last-child) > li:nth-child(11) { break-before: column; } } /* Features rows (el_class gw-feature--features: Find A Home / Privada "The Better Side of New", Community amenities): the copy runs long (list), so the photo bottom-aligns with the END OF THE FIRST PARAGRAPH instead of the column centre (Danny 2026-10-07). The copy wrappers become display: contents so eyebrow, heading and each body child are grid items of the row grid; the media spans the first three rows (eyebrow, heading, paragraph 1) and sits at their end. The .gw-intro gap is rebuilt with margins because a display: contents box has no gap. Only rows whose body OPENS with a real paragraph: the Community rows' body is a bare list (wpautop's empty

first) and keeps the centred layout. */ @media (min-width: 1000px) { .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-feature__inner { align-items: start; grid-auto-flow: row; row-gap: 0; } .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-feature__copy, .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-feature__copy .gw-intro, .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-intro__body { display: contents; } .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-feature__copy .gw-intro > *, .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-intro__body > * { grid-column: 2; } .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)).gw-feature--image-right .gw-feature__copy .gw-intro > *, .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)).gw-feature--image-right .gw-intro__body > * { grid-column: 1; } .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-feature__media { grid-column: 1; grid-row: 1 / span 3; align-self: end; display: flex; flex-direction: column; } /* flex: no anonymous line box under the figure */ .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-intro__body > p:first-child { margin-bottom: 0; padding-bottom: 0; } /* the row ends at the paragraph's last line, so the photo's bottom edge does too (Salient pads every p 1.5em at the bottom) */ .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-intro__body > p:first-child + * { margin-top: 1em; } .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-intro__body > p:first-child ~ * { grid-column: 1 / -1; } /* from "What You'll Notice" on: one full-width column under photo and copy */ .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-intro__body > p:first-child + * { margin-top: clamp(40px, 4vw, 72px); } .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)).gw-feature--image-right .gw-feature__media { grid-column: 2; } .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-feature__copy .gw-intro > .gw-eyebrow { margin-bottom: var(--gw-fluid-gap-eyebrow-heading); } .gw-feature--features:has(.gw-intro__body > p:first-child:not(:empty)) .gw-intro__body > :first-child { margin-top: var(--gw-fluid-gap-heading-body); } } /* Spaced bullet list (feedback card #66, Craig 2026-10-13, Privada 91 "The Better Side of New"): a wrapped bullet's own lines sit closer together than the gap between bullets. Opt-in per list with