Fix case-study page mobile responsiveness

[2002Bishwajeet]

The case-study page (/case-study/evisa) overflowed horizontally on phones — at a 390px viewport the layout was ~586px wide (whole-page horizontal scroll). Root causes and fixes:

• "At a glance" grid stayed 4 columns on mobile because an inline gridTemplateColumns: repeat(4,1fr) overrode the responsive CSS class. Now uses repeat(auto-fit, minmax(210px, 1fr)), so it reflows 4 → 2 → 1 column on its own.
• Phone mockups used width: 414 (a fixed width that forced the grid track, and the page, ~414px wide). Changed to width: 100%, maxWidth: 414 so they fill the column on phones and cap at 414 on desktop.
• Slim header nav (3 links) didn't wrap and spilled past the edge. Added flexWrap.
• Metrics table is now wrapped in a min-width scroll container, so its three columns stay readable and scroll horizontally on phones instead of being cut off.

Verified with Playwright at 390px: document width is exactly 390 (was 586), 0 elements overflow the viewport, no page errors. Desktop layout is unchanged.

[cloudflare-workers-and-pages]

Deploying ux4g with    Cloudflare Pages

Latest commit:	d178cb5
Status:	✅  Deploy successful!
Preview URL:	https://62eebef4.ux4g.pages.dev
Branch Preview URL:	https://fix-evisa-case-study-mobile.ux4g.pages.dev

View logs