fix: resolve overlapping cards in Learn section for all screen sizes

[hemag111]

What does this PR do?

Type of change

• [x ] 🐛 Bug fix
• ✨ New feature
• 📝 Content (mentor / resource / storyboard)
• 📖 Documentation
• [x ] 🎨 Style / UI improvement
• ♻️ Refactor

Checklist

• [x ] I've tested my changes locally (npm run dev)
• [x ] My code follows the project style guide
• I've added/updated comments where needed
• [x ] No console errors introduced

before

Screenshots

Before

After

Related issue

🐛 Bug Fix

Issue: #91
GSSoC 2026 Contribution

Problem:

Cards in the Learn section were overlapping
due to absolute positioning with fixed pixel values.

Changes Made:

• Changed absolute positioning to flexbox
• Made cards responsive for all screen sizes
• Cards now visible on mobile, tablet, desktop
• Removed fixed width and hardcoded positions

Tested:

• ✅ Full screen — no overlapping
• ✅ Narrow screen — cards visible
• ✅ Mobile responsive

Note:

Maintainer @navyamittal2245 approved via
/assign comment. Manual assignment requested
from @escher-m.
Contributing under GSSoC 2026

[vercel]

@hemag111 is attempting to deploy a commit to the HerStack's projects Team on Vercel.

A member of the Team first needs to authorize it.

[hemag111]

@navyamittal2245 @escher-m
Vercel deployment requires authorization
from maintainer. Code changes are ready
and conflict-free ✅