Update component files to use CSS range syntax

[pastelcyborg]

Done

• Updated component files to use new CSS range syntax, based on conversation in #5287 - this resolves an existing issue where gaps would exist between breakpoints for these utilities

Fixes #5313 Fixes WD-14299

QA

• Open the following demos:
  • article pagination
  • matrix
  • dropdown navigation
  • pull quote
  • table mobile card
• Ensure correct styles are applied between each breakpoint - the best way to test this is to reduce the browser window to ~619.5px and ~1035.5px and ensure styles are applied

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• [X] PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• [X] Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix release (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• [X] Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

[webteam-app]

Demo

Jenkins

demos.haus

[pastelcyborg]

Wondering whether the older pattern still living in other files of the codebase

Not anymore - I submitted 3 PRs to update this pattern across all existing files, separated by category.