body > footer { --color-footer-text: #c6d2e0; --color-footer-muted: #95a4b8; --color-footer-soft: #8796aa; display: grid; grid-template-columns: minmax(15rem, 16rem) minmax(0, 42rem); justify-content: center; align-items: stretch; gap: var(--space-4) var(--space-5); border-top: 0; padding: var(--space-3) var(--space-3) var(--space-4); background: var(--color-footer-background); text-align: left; } body > footer > * { margin-top: 0; } body > footer h2 { margin-top: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--color-footer-soft); } body > footer > nav { margin-top: 0; display: grid; align-content: center; line-height: normal; gap: var(--space-2); } body > footer > section { display: grid; align-content: center; justify-items: center; gap: var(--space-2); text-align: center; } body > footer > section > img { display: block; } body > footer > section > strong { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-footer-text); } body > footer > section > p { margin-top: 0; color: var(--color-footer-soft); font-size: 0.8rem; line-height: 1.45; } body > footer > section > p:first-of-type { color: var(--color-footer-text); font-size: 1rem; } body > footer > section > p a { color: var(--color-footer-text); text-decoration: none; } body > footer > section > p a:is(:hover, :focus-visible) { color: var(--color-link-hover); text-decoration: underline; } body > footer > nav > ul { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 0; margin-bottom: 0; padding: 0; } body > footer > nav > ul > li { display: grid; grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr); align-items: first baseline; gap: var(--space-1) var(--space-4); padding-block: 0.35rem; } body > footer > nav h2 { grid-column: 1; display: flex; justify-content: flex-end; text-align: right; line-height: 1.25; } body > footer > nav > ul > li > div { grid-column: 2; display: flex; flex-direction: column; justify-content: flex-start; gap: 0; } body > footer > nav h2 a, body > footer > nav h2 span { display: inline-block; text-decoration: none; color: var(--color-footer-muted); font-size: 0.78rem; line-height: 1.25; text-align: inherit; } body > footer > nav ul ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; row-gap: 0.1rem; column-gap: 0; margin-top: 0; margin-bottom: 0; padding: 0; } body > footer > nav ul ul a, body > footer > nav ul ul span { color: var(--color-footer-muted); text-decoration: none; font-size: 0.84rem; line-height: 1.25; } body > footer > nav ul ul > li { display: inline-flex; align-items: center; } body > footer > nav ul ul a:is(:hover, :focus-visible) { color: var(--color-link-hover); text-decoration: underline; } body > footer > nav ul ul > li + li::before { content: "•"; margin-inline: 0.45rem; color: var(--color-border-strong); } body > footer > nav > p { margin-top: 0; color: var(--color-footer-soft); font-size: 0.8rem; line-height: 1.45; justify-self: center; text-align: center; } body > footer > nav > p > time { color: var(--color-footer-text); }