:root { --background: #fff; --foreground: #112342; --primary: #1a365f; --border: #d8e0e9; --muted: #f2f5f8; }
* { box-sizing: border-box; } body { margin: 0; background: var(--background); color: var(--foreground); font: 17px/1.65 system-ui, sans-serif; } a { color: var(--primary); text-underline-offset: 4px; } header, footer { background: var(--muted); border-block: 1px solid var(--border); padding: 20px; } nav { display: flex; flex-wrap: wrap; gap: 12px 28px; max-width: 1080px; margin: auto; } main { max-width: 1080px; margin: auto; padding: 36px 20px; } h1 { font-size: 36px; line-height: 1.2; } h2 { font-size: 26px; } h3 { font-size: 20px; } section { padding-block: 18px; } figure { margin: 36px 0; } img { display: block; width: 100%; height: auto; } figcaption { padding: 20px 0; } .call { display: inline-block; background: var(--primary); color: var(--background); padding: 12px 20px; border-radius: 6px; font-weight: 700; } .directory { columns: 2; padding-left: 24px; } li { break-inside: avoid; padding-block: 4px; } footer { text-align: center; } @media(max-width: 600px) { h1 { font-size: 30px; } .directory { columns: 1; } }