Results grid reflows correctly at 320px, 768px, and 1280px breakpoints

A listing grid that doesn't reflow at 320px produces horizontal scroll, clipped card content, and text that runs off the edge of the phone. At 768px, oversized cards wrap into awkward half-widths. Each broken breakpoint silently excludes a slice of the audience — mobile users on cheap Android devices, tablet users in landscape, users at zoom 150% on a 1280px laptop. Responsive grid behavior is table-stakes for any directory serving traffic beyond a narrow desktop-only demographic.

Use a Tailwind or CSS Grid layout with explicit breakpoint column counts: 1 at mobile, 2-3 at tablet, 3-4 at desktop. Add min-w-0 on grid children to prevent overflow from long listing names. Edit components/ListingGrid.tsx:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  {listings.map(l => <ListingCard key={l.id} listing={l} className="min-w-0" />)}
</div>

Test at 320, 768, and 1280px before shipping.