Made Animated Carousel component responsive

[always-hy]

Fixes Issue🛠️

Closes #1416

Description👨‍💻

Enhanced carousel responsiveness by adding three media query breakpoints:

• Mobile (<600px): Switches to column layout for better readability on small screens
• Tablet (601-768px): Adjusts dimensions and font sizes for mid-sized screens
• Desktop (>768px): Maintains original layout with optimized sizing

The mobile view now stacks items vertically, improves touch targets, and hides non-essential elements to create a more mobile-friendly experience.

Type of Change📄

• Style (non-breaking change which improves website style or formatting)
• Responsiveness (non-breaking change which improves UI/UX on different screen sizes)

Checklist✅

• I am an Open Source contributor
• I have performed a self-review of my code
• My code follows the style guidelines of this project
• I have commented on my code, particularly in hard-to-understand areas

Screenshots/GIF📷

Large screen size:

Medium screen size:

Small screen size:

[netlify]

✅ Deploy Preview for beautiify ready!

Name	Link
🔨 Latest commit	7b6b8fa
🔍 Latest deploy log	https://app.netlify.com/sites/beautiify/deploys/681508e2efbc9a00084eccca
😎 Deploy Preview	https://deploy-preview-1503--beautiify.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 site configuration.

[github-actions]

Hey @always-hy, Welcome to the project Beautiify! 🎊
Thanks for your contribution! Your effort makes this project better. Keep it up! 🙌
Please wait for the PR to be reviewed. Happy Coding!! ✨

[github-actions]

Congrats, Your pull request has been successfully merged 🥳🎉 Thank you for your contribution to my project 🚀 Keep Contributing!! ✨ @always-hy