feat: make 'Upcoming Events' section responsive and accessible (#1191)

[sanakhuram]

What does this PR do?

This pull request adds responsive layout adjustments and basic accessibility improvements to the "Upcoming Events" section on the /event page.

Description of Task to be completed?

• Implement responsive grid layout using Tailwind breakpoints (mobile, tablet, desktop)
• Scale font sizes and spacing for readability across devices
• Add descriptive alt text to images
• Ensure semantic HTML structure.
• Add aria-label attributes to interactive icons for screen reader support
• Confirm keyboard accessibility with focus indicators and tab order

How should this be manually tested?

1. Navigate to the /event page
2. Resize the browser or use Chrome DevTools to test on mobile, tablet, and desktop breakpoints
3. Confirm that:
   • Layout adapts properly across all screen sizes
   • All text and images scale without overflow or clipping
   • Keyboard navigation flows logically with visible focus
   • SVG links/buttons have screen reader labels
4. Run a Lighthouse or Axe audit to confirm accessibility improvements

Any background context you want to provide?

This work is scoped to the "Upcoming Events" section only. Broader performance or SEO issues identified in Lighthouse reports are outside the scope of this ticket and should be handled separately. This branch was created from feature/event-page.

[netlify[bot]]

✅ Deploy Preview for musikkforandrerliv ready!

Name	Link
🔨 Latest commit	b83108901bc02f65fbda8ca1b59a96a8755d3f56
🔍 Latest deploy log	https://app.netlify.com/projects/musikkforandrerliv/deploys/68404992b24883000868971c
😎 Deploy Preview	https://deploy-preview-1209--musikkforandrerliv.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Niksubishi]

Approved. Feedback via Team Discord.