fix(footer): stack sections and lock logo ratio on mobile

[nunoeufrasio]

What

The site footer was not responsive on mobile. The brand block and the three
nav columns stayed in a single horizontal row, overflowing off the right edge
on narrow viewports, and the logo could stretch out of proportion.

How

• Top row (brand + nav) and the nav-sections wrapper now stack vertically by
  default and switch to the original horizontal layout at the md (768px)
  breakpoint.
• Logo is pinned to w-auto max-w-full object-contain with self-start on its
  link wrapper so it always keeps its aspect ratio and never stretches.
• "Start a Fundraise" (a <button>) gets self-start text-left so it aligns
  with the other links once sections go full-width on mobile.

Single-file, template-only change — no logic or dependency changes.

Verification

• Mobile (375px): sections stack vertically, logo proportional, no overflow.
• Desktop (1280px): original side-by-side layout preserved, no regression.
• prettier, eslint, tsc --noEmit all clean.

[Copilot]

Pull request overview

Improves the footer’s mobile responsiveness by stacking the brand block and navigation sections vertically on small viewports while preserving the original horizontal layout at the md breakpoint, and prevents the logo image from stretching out of proportion.

Changes:

• Switch the top footer layout to flex-col by default with md:flex-row to avoid horizontal overflow on mobile.
• Stack nav sections on mobile (flex-col) and keep multi-column layout on desktop (md:flex-row).
• Constrain the logo image sizing (w-auto max-w-full object-contain) and adjust alignment for the brand link and the “Start a Fundraise” button.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.