feat: support more than 4 media attachments with 3 columns grid

[shuuji3]

fix #2502
fix #2796

This PR fixes the broken grid layout for more than 4 attachments. In that case, the number of the grid columns switches from 2 to 3 to reduce the height of the post and show more overview of the gallery.

Screenshot

Example posts in #2796: https://pixelfed.social/p/Lacalle/684124192137313050

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	f2e5e6e
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/66195031720dce000873da6a
😎 Deploy Preview	https://deploy-preview-2802--elk-zone.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.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	f2e5e6e
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/661950310c41ca0008ae1c9a

[userquin]

Why not just using vue css vars?

.status-media-container {
  --grid-cols: v-bind(gridColumnNumber);
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
}

[shuuji3]

Oh, I didn't know that feature. That also worked perfectly. Updated!