/* ============================================================================ marketing.css — DyslexiaAI public marketing site (Reading Room / brand-true) Palette derived from the iOS app: lexyPrimary #3498DB, deepBlue #2E4057, clean cool neutrals (light) / near-black (dark). Type: Comfortaa (brand, from the logomark) + Lexend (body, reading-engineered). Icons: {% icon %} (Heroicons). @font-face lives in marketing_base.html (needs {% static %}). Theme contract: localStorage 'theme' -> data-theme="dark|light" on , with prefers-color-scheme as the pre-JS default. Style through tokens only. Signed: Kev + claude-opus-4-8, 2026-07-08, Confidence 0.8, Prior: Unknown ============================================================================ */ :root { --paper:#F7F8FA; --paper-2:#EDF0F4; --card:#FFFFFF; --card-2:#FFFFFF; --ink:#1B3251; --ink-2:#4B5D74; --ink-3:#7A899B; --line:#E3E8EF; --line-soft:#EDF0F4; --blue:#3498DB; --blue-2:#2A7CB8; --blue-wash:#EAF4FC; --navy:#2E4057; --navy-deep:#1E3A5F; --good:#34A56A; --good-wash:#E6F4EC; --brand:'Comfortaa','Trebuchet MS',system-ui,sans-serif; --body:'Lexend',system-ui,-apple-system,sans-serif; --shadow:0 1px 2px rgba(30,58,95,.05),0 8px 22px rgba(30,58,95,.06); --shadow-lift:0 2px 5px rgba(30,58,95,.07),0 18px 42px rgba(30,58,95,.12); --r:18px; --r-sm:12px; --ease:cubic-bezier(.22,1,.36,1); --lexy-glow:rgba(52,152,219,.22); color-scheme:light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#121212; --paper-2:#181818; --card:#1E1E1E; --card-2:#282828; --ink:#FAFAFA; --ink-2:#AEB6C2; --ink-3:#7E8896; --line:#2C2C2C; --line-soft:#232323; --blue:#57ACE6; --blue-2:#3498DB; --blue-wash:#14283A; --navy:#20344B; --navy-deep:#14212F; --good:#46C07E; --good-wash:#14261C; --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.4); --shadow-lift:0 2px 6px rgba(0,0,0,.45),0 20px 48px rgba(0,0,0,.55); --lexy-glow:rgba(87,172,230,.26); color-scheme:dark; } } :root[data-theme="dark"] { --paper:#121212; --paper-2:#181818; --card:#1E1E1E; --card-2:#282828; --ink:#FAFAFA; --ink-2:#AEB6C2; --ink-3:#7E8896; --line:#2C2C2C; --line-soft:#232323; --blue:#57ACE6; --blue-2:#3498DB; --blue-wash:#14283A; --navy:#20344B; --navy-deep:#14212F; --good:#46C07E; --good-wash:#14261C; --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.4); --shadow-lift:0 2px 6px rgba(0,0,0,.45),0 20px 48px rgba(0,0,0,.55); --lexy-glow:rgba(87,172,230,.26); color-scheme:dark; } /* ---- base (marketing.css is only linked on marketing pages, so bare element selectors are safely scoped here; boilerplate ships normalize + tailwind) ---- */ *,*::before,*::after { box-sizing:border-box; } body { background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.62; margin:0; -webkit-font-smoothing:antialiased; overflow-x:hidden; } #background-svg { display:none; } /* drop the boilerplate decorative circles */ #wrapper { background:var(--paper); min-height:100vh; } a { color:inherit; text-decoration:none; } img { max-width:100%; } ::selection { background:var(--blue); color:#fff; } h1,h2,h3 { font-family:var(--brand); font-weight:700; margin:0; } .rr-wrap { max-width:1120px; margin:0 auto; padding:0 24px; } .ic { width:1em; height:1em; stroke:currentColor; fill:none; vertical-align:-.14em; flex:none; } .rr-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---- brand lockup (real "d" logomark + wordmark) ---- */ .rr-brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); } .rr-dmark { width:26px; height:26px; color:var(--navy-deep); flex:none; } :root[data-theme="dark"] .rr-dmark { color:var(--ink); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rr-dmark { color:var(--ink); } } .rr-wm { font-family:var(--brand); font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--ink); } /* ---- buttons ---- */ .rr-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600; font-size:15px; border-radius:12px; padding:11px 20px; cursor:pointer; border:1px solid transparent; transition:transform .15s var(--ease), box-shadow .2s, background .15s, border-color .15s; white-space:nowrap; } .rr-btn .ic { width:17px; height:17px; } .rr-btn:active { transform:translateY(1px); } .rr-btn-blue { background:var(--blue); color:#fff; box-shadow:0 5px 16px color-mix(in srgb,var(--blue) 30%,transparent); } .rr-btn-blue:hover { transform:translateY(-2px); background:var(--blue-2); box-shadow:0 9px 22px color-mix(in srgb,var(--blue) 38%,transparent); } .rr-btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); } .rr-btn-ghost:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-wash); } .rr-btn-lg { font-size:16.5px; padding:15px 28px; border-radius:14px; } .rr-btn:focus-visible,a:focus-visible,button:focus-visible { outline:3px solid var(--blue); outline-offset:2px; border-radius:12px; } /* ---- nav ---- */ .rr-nav { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid var(--line-soft); } .rr-nav-in { display:flex; align-items:center; gap:28px; height:66px; } .rr-nav-links { display:flex; gap:26px; margin-left:14px; } .rr-nav-links a { font-size:15px; font-weight:500; color:var(--ink-2); transition:color .15s; } .rr-nav-links a:hover { color:var(--blue); } .rr-nav-right { margin-left:auto; display:flex; align-items:center; gap:12px; } .rr-iconbtn { width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; transition:.15s; } .rr-iconbtn:hover { border-color:var(--blue); color:var(--blue); } .rr-iconbtn .ic { width:18px; height:18px; } .rr-nav-burger { display:none; } .rr-nav-mobile { border-top:1px solid var(--line-soft); background:var(--paper); } .rr-nav-mobile .rr-wrap { display:flex; flex-direction:column; padding-top:8px; padding-bottom:14px; } .rr-nav-mobile a { padding:12px 0; font-size:16px; font-weight:600; color:var(--ink-2); border-bottom:1px solid var(--line-soft); } .rr-nav-mobile a:last-child { border-bottom:0; } /* ---- hero ---- */ .rr-hero { padding:78px 0 44px; } .rr-hero-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:48px; align-items:center; } .rr-hero-h1 { font-size:clamp(2.5rem,6vw,4.4rem); line-height:1.02; letter-spacing:-.03em; text-wrap:balance; color:var(--ink); } .rr-hero-h1 .accent { color:var(--blue); } .rr-hero-sub { font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--ink-2); line-height:1.64; max-width:34ch; margin:24px 0 0; } .rr-hero-sub b { color:var(--ink); font-weight:600; } .rr-hero-cta { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; } .rr-hero-trust { display:flex; gap:18px; margin-top:36px; flex-wrap:wrap; align-items:center; } .rr-trust-item { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); } .rr-trust-item .ic { width:17px; height:17px; stroke:var(--blue); } .rr-trust-item b { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; } .rr-trust-sep { width:1px; height:20px; background:var(--line); } .rr-lexy-stage { position:relative; display:grid; place-items:center; min-height:400px; } .rr-lexy-glow { position:absolute; width:min(380px,90%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, var(--lexy-glow) 0%, transparent 66%); filter:blur(6px); pointer-events:none; } .rr-lexy-model { position:relative; width:100%; max-width:440px; height:440px; } .rr-lexy-model model-viewer { width:100%; height:100%; display:block; background:transparent; --poster-color:transparent; } /* ---- mission band ---- */ .rr-band { margin:58px auto; } /* auto keeps a .rr-wrap.rr-band horizontally centred (0 would pin it left) */ .rr-mission { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:20px; padding:clamp(30px,4.4vw,48px); box-shadow:var(--shadow); } .rr-mission-q { font-family:var(--brand); font-weight:700; font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.2; letter-spacing:-.02em; color:var(--ink); max-width:24ch; text-wrap:balance; } .rr-mission-q .u { color:var(--blue); } .rr-mission-p { margin:18px 0 0; font-size:1.06rem; color:var(--ink-2); max-width:58ch; line-height:1.72; } .rr-mission-sig { margin-top:22px; font-size:13.5px; color:var(--ink-3); } .rr-mission-sig .who { font-weight:600; color:var(--ink-2); } /* ---- section heads ---- */ .rr-sec { margin:84px auto; } /* auto keeps a .rr-wrap.rr-sec horizontally centred (0 would pin it left) */ .rr-kicker { font-family:var(--body); font-weight:700; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); } .rr-h2 { font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.12; letter-spacing:-.02em; margin:10px 0 0; color:var(--ink); text-wrap:balance; max-width:20ch; } .rr-lede { font-size:1.06rem; color:var(--ink-2); margin:16px 0 0; max-width:54ch; line-height:1.66; } /* ---- feature trio ---- */ .rr-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; } .rr-fcard { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px 28px; box-shadow:var(--shadow); transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; } .rr-fcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb,var(--blue) 38%,var(--line)); } .rr-fico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--blue-wash); color:var(--blue); margin-bottom:16px; } .rr-fico .ic { width:24px; height:24px; stroke:var(--blue); } .rr-fcard h3 { font-size:1.18rem; margin:0 0 8px; color:var(--ink); letter-spacing:-.01em; } .rr-fcard p { margin:0; font-size:.97rem; color:var(--ink-2); line-height:1.62; } /* ---- showcase (product session card) ---- */ .rr-showcase { display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; align-items:center; } .rr-session { background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lift); padding:22px; } .rr-sc-top { display:flex; align-items:center; gap:11px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); } .rr-sc-av { width:38px; height:38px; border-radius:11px; background:var(--blue-wash); color:var(--blue); display:grid; place-items:center; } .rr-sc-av .ic { width:20px; height:20px; stroke:var(--blue); } .rr-sc-nm { font-weight:700; color:var(--ink); font-size:15px; } .rr-sc-st { font-size:12px; color:var(--ink-3); } .rr-sc-chip { margin-left:auto; font-family:var(--body); font-weight:700; font-size:13px; color:var(--blue-2); background:var(--blue-wash); border:1px solid color-mix(in srgb,var(--blue) 24%,transparent); padding:3px 11px; border-radius:999px; } .rr-sc-body { padding:22px 4px 6px; text-align:center; } .rr-sc-prompt { font-size:13px; color:var(--ink-3); } .rr-sc-word { font-family:var(--brand); font-weight:700; font-size:2.8rem; letter-spacing:.01em; color:var(--ink); margin:8px 0 6px; } .rr-sc-word .seg { color:var(--blue); } .rr-sc-ph { font-family:var(--body); font-size:15px; color:var(--ink-2); letter-spacing:.04em; } .rr-sc-opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; } .rr-sc-opt { border:1px solid var(--line); border-radius:12px; padding:12px; font-weight:600; color:var(--ink); background:var(--paper); display:flex; justify-content:center; align-items:center; gap:6px; } .rr-sc-opt.ok { border-color:var(--good); background:var(--good-wash); color:var(--good); } .rr-sc-opt.ok .ic { width:16px; height:16px; stroke:var(--good); } .rr-checks { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px; } .rr-checks li { display:flex; gap:12px; font-size:1rem; color:var(--ink-2); line-height:1.5; } .rr-checks li .k { flex:none; width:24px; height:24px; border-radius:7px; background:var(--blue-wash); color:var(--blue); display:grid; place-items:center; margin-top:1px; } .rr-checks li .k .ic { width:15px; height:15px; stroke:var(--blue); stroke-width:2; } /* ---- proof ---- */ .rr-proof { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; } .rr-stat { text-align:center; padding:10px; } .rr-stat .n { font-family:var(--brand); font-weight:700; font-size:clamp(1.9rem,3.6vw,2.5rem); color:var(--blue); line-height:1; font-variant-numeric:tabular-nums; } .rr-stat .l { font-size:13.5px; color:var(--ink-3); margin-top:10px; } .rr-quote { margin-top:44px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:var(--r); padding:30px 34px; box-shadow:var(--shadow); } .rr-quote p { font-family:var(--brand); font-weight:700; font-size:clamp(1.15rem,2.1vw,1.5rem); line-height:1.44; color:var(--ink); margin:0; letter-spacing:-.01em; text-wrap:balance; } .rr-quote .by { margin-top:16px; font-size:14px; color:var(--ink-3); font-family:var(--body); } /* ---- pricing (navy slab) ---- */ .rr-pricing { background:var(--navy-deep); border-radius:24px; padding:clamp(34px,4.6vw,54px); display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center; } :root[data-theme="dark"] .rr-pricing { background:var(--card-2); border:1px solid var(--line); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rr-pricing { background:var(--card-2); border:1px solid var(--line); } } .rr-pricing h2 { font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.14; letter-spacing:-.02em; color:#fff; text-wrap:balance; } :root[data-theme="dark"] .rr-pricing h2 { color:var(--ink); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rr-pricing h2 { color:var(--ink); } } .rr-pricing p { margin:14px 0 0; color:rgba(255,255,255,.74); font-size:1.04rem; line-height:1.62; } :root[data-theme="dark"] .rr-pricing p { color:var(--ink-2); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rr-pricing p { color:var(--ink-2); } } .rr-price-tag { text-align:center; } .rr-price-tag .free { font-family:var(--brand); font-weight:700; font-size:3rem; color:var(--blue); line-height:1; } .rr-price-tag .sm { font-size:14px; color:rgba(255,255,255,.62); margin-top:10px; } :root[data-theme="dark"] .rr-price-tag .sm { color:var(--ink-3); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rr-price-tag .sm { color:var(--ink-3); } } .rr-pricing .rr-btn-blue { margin-top:24px; } /* ---- cta ---- */ .rr-cta { text-align:center; padding:26px 0 8px; } .rr-cta h2 { font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.1; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; } .rr-cta p { color:var(--ink-2); font-size:1.08rem; margin:16px auto 0; max-width:44ch; } .rr-cta-btns { display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap; } /* ---- footer ---- */ .rr-foot { margin-top:92px; border-top:1px solid var(--line); background:var(--paper-2); } .rr-foot-in { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding:52px 0 34px; } .rr-foot-brand .rr-brand { margin-bottom:12px; } .rr-foot-brand p { font-size:14px; color:var(--ink-3); max-width:30ch; line-height:1.6; margin:0; } .rr-foot-col h4 { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin:0 0 14px; font-weight:700; font-family:var(--body); } .rr-foot-col a { display:block; font-size:14.5px; color:var(--ink-2); padding:5px 0; transition:color .15s; } .rr-foot-col a:hover { color:var(--blue); } .rr-foot-bar { border-top:1px solid var(--line); padding:20px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-3); } /* ---- motion ---- */ .rr-reveal { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .rr-reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { .rr-reveal { opacity:1; transform:none; transition:none; } } /* ---- responsive ---- */ @media (max-width:900px) { .rr-hero-grid { grid-template-columns:1fr; gap:12px; } .rr-lexy-stage { order:-1; min-height:320px; } .rr-lexy-model { height:320px; } .rr-hero-sub { max-width:none; } .rr-trio { grid-template-columns:1fr; } .rr-showcase { grid-template-columns:1fr; gap:30px; } .rr-proof { grid-template-columns:1fr 1fr; gap:24px; } .rr-pricing { grid-template-columns:1fr; text-align:center; } .rr-foot-in { grid-template-columns:1fr 1fr; gap:26px; } .rr-nav-links { display:none; } .rr-nav-burger { display:grid; } } @media (max-width:520px){ .rr-hero { padding:40px 0 20px; } .rr-foot-in { grid-template-columns:1fr; } .rr-hero-trust { gap:14px; } .rr-trust-sep { display:none; } .rr-nav-cta-desktop { display:none; } } /* Stripe pricing table is a custom element (defaults to display:inline, which mis-aligns its iframe). Force block + full width so it sits centered in the section. Keep it un-animated (no rr-reveal) — see pricing.html. */ .rr-stripe { display:block; width:100%; } .rr-stripe stripe-pricing-table, stripe-pricing-table { display:block; width:100%; } /* ── Emoji password (schools) — the emoji ARE the feature, so show them ── */ .rr-emoji-pass { font-size:2.6rem; line-height:1; letter-spacing:.12em; margin-bottom:16px; user-select:none; } /* ── FAQ accordion — native
, no JS, keyboard + SR accessible ── */ .rr-faq { display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto; } .rr-faq-item { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:border-color .15s, box-shadow .2s; } .rr-faq-item[open] { border-color:color-mix(in srgb,var(--blue) 40%,var(--line)); box-shadow:var(--shadow-lift); } .rr-faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; font-family:var(--brand); font-weight:700; font-size:1.06rem; color:var(--ink); } .rr-faq-item summary::-webkit-details-marker { display:none; } .rr-faq-item summary::after { content:""; flex:none; width:11px; height:11px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(45deg); transition:transform .2s var(--ease); margin-top:-4px; } .rr-faq-item[open] summary::after { transform:rotate(-135deg); margin-top:2px; } .rr-faq-item summary:hover { color:var(--blue); } .rr-faq-item summary:focus-visible { outline:3px solid color-mix(in srgb,var(--blue) 55%,transparent); outline-offset:-3px; border-radius:16px; } .rr-faq-a { padding:0 22px 20px; color:var(--ink-2); font-size:1rem; line-height:1.62; } @media (prefers-reduced-motion:reduce){ .rr-faq-item, .rr-faq-item summary::after { transition:none; } } /* ── Form primitives (join-testers, request-demo, any marketing form) ── */ .rr-formcard { background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lift); padding:clamp(24px,3vw,34px); } .rr-formcard h2 { font-size:1.5rem; color:var(--ink); margin:0 0 6px; letter-spacing:-.01em; } .rr-formcard .rr-form-intro { color:var(--ink-2); font-size:.96rem; margin:0 0 22px; } .rr-form { display:flex; flex-direction:column; gap:16px; } .rr-field { display:flex; flex-direction:column; gap:6px; } .rr-field > span { font-size:14px; font-weight:600; color:var(--ink); } .rr-req { color:var(--blue); } .rr-input { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:1rem; line-height:1.5; transition:border-color .15s, box-shadow .15s; } .rr-input::placeholder { color:var(--ink-3); } .rr-input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent); } select.rr-input { appearance:auto; } .rr-form-submit { width:100%; justify-content:center; margin-top:4px; } .rr-form-err { color:#dc2626; font-size:.875rem; } .rr-form-alert { background:color-mix(in srgb,#dc2626 8%,var(--card)); border:1px solid color-mix(in srgb,#dc2626 32%,transparent); border-radius:10px; padding:12px 14px; color:#dc2626; font-size:.9rem; } .rr-form-note { color:var(--ink-3); font-size:13px; text-align:center; margin:2px 0 0; } .rr-form-legal { color:var(--ink-3); font-size:12px; text-align:center; line-height:1.5; margin:0; } .rr-form-legal a { color:var(--ink-2); text-decoration:underline; } .rr-form-success { background:var(--good-wash); border:1px solid color-mix(in srgb,var(--good) 42%,transparent); border-radius:16px; padding:28px 24px; text-align:center; } .rr-form-success .rr-success-ico { width:52px; height:52px; border-radius:14px; margin:0 auto 14px; display:grid; place-items:center; background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good); } .rr-form-success .rr-success-ico .ic { width:28px; height:28px; stroke:var(--good); } .rr-form-success .t { font-size:1.15rem; font-weight:700; color:var(--good); margin:0 0 6px; font-family:var(--brand); } .rr-form-success .b { color:var(--ink-2); margin:0; } .rr-tester-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:48px; align-items:start; } /* Suppress the floating reCAPTCHA badge — Google disclosure surfaced inline per https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge */ .grecaptcha-badge { visibility:hidden !important; } @media (max-width:900px){ .rr-tester-grid { grid-template-columns:1fr; gap:36px; } }