feat(onboarding): Add responsiveness to all aspects of the onboarding quiz card and page

[magali-la]

🎯Type of Change:

• Feat ✨: New feature or functionality.

This PR...

Adds responsive gradient background spanning the whole height, adds responsive container sizes, and adds responsive font sizes across breakpoints, adds responsive layouts for buttons in the container. Added responsiveness for xs screen widths (320px) and small height screens

---

📝 What I Did:

• Adjusted gradient background across breakpoints to span the full height on mobile screens
• Added responsive vw sizes across all breakpoints from default to 2xl Tailwind breakpoints for the quiz card container
• Added three responsive font sizes to card text
• Added responsive grid layout for mobile screens of the quiz buttons , having one grid column as default, and 2 for larger screens
• Adjusted the gap between the grid buttons for mobile and desktop breakpoints
• Applied reverse so that next button sits atop the skip button on mobile screens flex column layout
• Notices issue with content overflow in smallest devtools breakpoint, adjusted gaps across different elements and added font size changes to stay within the container.

---

🧪 How to Test:

1. Navigate to the Netlify preview for this PR
2. Click inspect and test the static layouts on each default breakpoint in DevTools at the top of the screen
3. Inspect the responsive behavior by dragging the width of the screen, ensuring it is correctly scaling down or up
4. Use tab navigation to ensure spacing of focus outlines does not intersect with other elements

---

🤔 What I learned:

I noticed because of the order of the next and skip buttons in my code or DOM order, the skip button receives focus first when using tab navigation, even when on mobile layout which places the next button on top. It is something to consider from a UX perspective which of these buttons should receive focus first for keyboard users on different screen sizes. From there, a tab index can be included for each button in future developments of the app.

[netlify]

✅ Deploy Preview for mint-chip ready!

Name	Link
🔨 Latest commit	35e0997
🔍 Latest deploy log	https://app.netlify.com/projects/mint-chip/deploys/6908bcdd3b78a9000880e103
😎 Deploy Preview	https://deploy-preview-20--mint-chip.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.

[magali-la]

Update: Included additional commit with more breakpoint sizes and font sizes to adjust to very small screens widths and heights and avoid content overflow

[nkabembo]

Suggestion: for mobile view on onboarding quiz making sure the content remains in white card and not go out onto the gradient.
Everything else is fine.