feat: responsive card grid for volunteers & opportunities (currently fixed at 3 columns)

[thnndnly]

Summary

The card view on the volunteers and opportunities lists is not responsive. It
renders a fixed 3-column grid of fixed-width (320px) cards, left-aligned, so wide
screens waste a large right gutter — it looks like another card would fit.

Measurements (card view)

Viewport	Columns	Grid width	Wasted right gutter
1440px	3	992px	~322px
1728px	3	992px	~542px (~1.7 cards)
1920px	3	992px	~638px (~2 cards)

Technical notes

• Grid: src/components/core/paginatedGrid/PaginatedGrid.tsx
  (grid-template-columns: repeat(${columns}, 1fr)).
• columns comes from CARD_COLUMNS = 3 (src/config/constants.ts), only
  reduced by 1 when the filter panel is open — never tied to viewport width.
• Cards have fixed width: 320px (--dashboard-volunteers-card-width, used by
  both card types), so the grid collapses to ~992px and sits left-aligned.

Important coupling — needs a decision

Page size is derived from the grid: itemsPerPage = columns * rows
(PaginatedGrid.tsx). Making columns fluid changes how many items are fetched
per page, so we must decide how pagination behaves:

• Option A (small): repeat(auto-fill, minmax(320px, 1fr)), keep a fixed
  page size (e.g. 9 or 12); last row may be unevenly filled. Low risk.
• Option B (larger): compute columns from container width and recompute
  itemsPerPage on resize (refetch on resize). Evenly filled rows, more logic.