fix: add page-break-inside: avoid for Safari column compatibility in masonry (#1348)

[Pcmhacker-piro]

Closes #1348

Pull Request Description

Safari's CSS column algorithm misplaces items (especially the third item) when items have varying heights inside ease-masonry-*. Adding page-break-inside: avoid alongside break-inside: avoid is a well-known WebKit workaround that fixes column item ordering in Safari without affecting Chrome/Firefox.

---

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/your-feature-name/
• 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/ — only components/masonry.css
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

Adds page-break-inside: avoid to all .ease-masonry > *, .ease-masonry-2 > *, .ease-masonry-3 > *, and .ease-masonry-4 > * child item rules.

How does a developer use it?

No usage change — the masonry component now works correctly in Safari with items of varying heights.

<div class="ease-masonry ease-masonry-4">
  <div style="height: 200px">Item 1</div>
  <div style="height: 300px">Item 2</div>
  <div style="height: 150px">Item 3</div>
  <div style="height: 250px">Item 4</div>
</div>
Why does it fit EaseMotion CSS?
Cross-browser compatibility is essential for a CSS framework. One line per rule unblocks Safari users without breaking Chrome/Firefox.
Demo
- Demo added (demo.html works by opening directly in a browser)
Browser Testing
- Chrome
- Firefox
- Edge
- Safari (Safari 17+ tested — third item no longer misplaces)
Notes for Maintainer
page-break-inside: avoid is the legacy print property that preceded break-inside. Safari's column layout algorithm respects it as a fallback hint for column item placement, which resolves the inconsistent ordering bug when items have uneven heights.
Closes #1348

[Pcmhacker-piro]

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

[github-actions]

📊 CSS Bundle Size Benchmark

This PR changes the size of easemotion.min.css.

Metric	Base Branch	This PR	Difference
Raw	47.43 KB	47.52 KB	📈 +0.09 KB
Gzip	8.34 KB	8.34 KB	📈 +0.01 KB
Brotli	7.13 KB	7.15 KB	📈 +0.02 KB