chore: refactor for more compatible media queries

[davidnuescheler]

https://no-range-mq--aem-boilerplate--adobe.aem.live/

there is a bit of a conflict with our guidance to not change the default linter configs https://www.aem.live/docs/dev-collab-and-good-practices#linting and the default stylelint config to use media query range syntax. the range syntax is relatively new and has only 92% support https://caniuse.com/css-media-range-syntax

the failure for browsers that don't support it, in our "mobile first" setup really means that only affects desktop (ish) browsers, and they would usually just see the mobile styling.
in cases where js is used via media queries or viewport width dimensions there could be further issues.

i am not entirely sure what's the right thing to do here, so i am just raising the PR so we have a place to see the impact and debate.

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• e20dd2c ✅ (latest)
• aba5e72 ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/
🖥️	/

[kptdobe]

Most of the non supportive devices seems to be mobile anyway (opera mini and android).

I just got so used to the range syntax... but I agree, this is a dev preference.