feat: add responsive display utility classes (ease-hidden-*, ease-block-*, ease-flex-*)

[Pcmhacker-piro]

Closes #1179

Pull Request Description

Add responsive display utility classes to submissions/examples/ease-display-utilities/. Replaces the previous non-responsive demo with a full set of breakpoint-aware utilities following the framework's 640/768/1024/1280px convention.

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

• All changes are inside submissions/examples/ease-display-utilities/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

Responsive display utility classes: ease-hidden-sm/md/lg/xl, ease-block-sm/md/lg/xl, ease-flex-sm/md/lg/xl, ease-inline-sm/md/lg/xl, ease-hidden-down-sm/md/lg/xl, plus static ease-block, ease-inline, ease-inline-block, ease-flex, ease-inline-flex, ease-grid, ease-inline-grid, ease-hidden.

How does a developer use it?

<!-- Hide sidebar below lg -->
<aside class="ease-hidden-down-lg">...</aside>

<!-- Stack on mobile, flex row on md+ -->
<div class="ease-flex-md" style="display:block">
  <div>Card 1</div>
  <div>Card 2</div>
</div>

<!-- Mobile-only banner -->
<div class="ease-hidden-sm">Visible only below 640px</div>
Why does it fit EaseMotion CSS?
Responsive visibility is a fundamental layout primitive in every CSS framework. These classes let developers control display per breakpoint with single readable classes, directly supporting the "write UI like you describe it in English" philosophy.
Demo
- Demo added (demo.html works by opening directly in a browser)
Browser Testing
- Chrome
- Firefox
- Edge
- Safari (optional but appreciated)
Notes for Maintainer
All responsive utilities use !important to reliably override other display values. The breakpoint values match the framework convention (640/768/1024/1280px). ease-hidden-down-* uses max-width: (bp - 1px) to avoid overlap with min-width classes. Dark mode and reduced motion are handled via prefers-color-scheme: dark.

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/ease-display-utilities

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

[github-actions]

📊 CSS Bundle Size Benchmark

No change in CSS bundle size. ✨

[Pcmhacker-piro]

heyy @SAPTARSHI-coder
i fixed the assign issue so pls check this