Capstone 9: Footer (4-column responsive)

A site footer that scales

Four columns on desktop: Brand + Product + Company + Legal. On tablet it collapses to two columns; on phone, one column stacked. The same auto-fit grid trick from the pricing capstone handles the reflow — no media queries required.

The one-line responsive grid

grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)). As the viewport shrinks, the grid engine drops columns one-by-one whenever a card can't hold 180px. On a 375px phone that's one column. On a 1280px desktop, four. Zero conditional CSS.

The typography rules that make footers "look pro"

• Column headers — text-transform: uppercase, letter-spacing: 0.05em, small (13px), colour white. This is the "footer header" visual convention across every SaaS site.
• Link colour — muted (oklch(0.85 0 0)) by default, brightens to full white on hover. transition: color 0.15s for the polish.
• Dark background + light muted text — the standard footer palette. Uses var(--text) (your normal dark text colour) as the background to auto-pick the site's darkest neutral.

The bottom bar

A one-liner separated from the columns by border-top: 1px solid oklch(1 0 0 / 0.1) (10% opaque white). Uses grid-column: 1 / -1 to span every column regardless of how many the grid decided to render.