fix: make project cards responsive at 360px

[riyanshigupta890-cloud]

Summary [required]

This PR improves project card responsiveness on small mobile devices (360px–390px viewports). Budget Android phones often have 360px width, and the current design causes cards to overflow horizontally, wrapping tags awkwardly and clipping button text. This fix adds a three-tier responsive strategy: compact styling on mobile (360–380px), intermediate sizing on small tablets (381–640px), and original styling on larger devices (641px+). No JavaScript or logic changes; CSS only.

Related Issue [required]

Closes #9

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
static/style.css	Added @media (max-width: 380px) block with reduced card padding (20px), single-column grid, smaller tags (0.7rem), and full-width buttons. Added @media (min-width: 381px) and (max-width: 640px) for intermediate tablet styles (24px padding). Added @media (min-width: 641px) to restore original desktop styles and prevent regressions.

How to Test This PR [required]

1. Clone this branch: git checkout fix/responsive-cards-360px-v2
2. Run the app: python app.py
3. Open http://127.0.0.1:5000/#the-project in Chrome
4. Open Chrome DevTools (F12) and enable Device Toolbar (Ctrl+Shift+M)
5. Test the following viewports:
   • 360px (Pixel 4a): Fill the form and generate results. Verify no horizontal scroll, cards fit within viewport, tags wrap to 2 lines, buttons text fully visible.
   • 375px (iPhone SE): Verify stable intermediate state with same checks.
   • 390px (Pixel 6a): Verify no overflow or text clipping.
   • 768px (iPad): Verify original padding (24px+) restored, grid layout working, no regressions.
   • 1280px (Desktop): Verify full auto-fill grid, original spacing, all hover states work.

Test Results [required]

Visual regression testing completed across all breakpoints:

[vercel]

@riyanshigupta890-cloud is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.