New Rule: prefer-media-query-range

### Rule details

Prefer using media query range syntax over using min/max-*

### What type of rule is this?

Suggests an alternate way of doing something

### Example code

```css
@media (min-width: 100px) {} /* -> @media (width > 100px) */

@media (min-width: 100px) and (max-width: 200px) {} /* -> @media (100px <= width <= 200px) */
```

### Prior Art

- [stylelint](https://stylelint.io/user-guide/rules/media-feature-range-notation)

### Participation

- [x] I am willing to submit a pull request to implement this rule.

### AI acknowledgment

- [ ] I did not use AI to generate this issue report.
- [x] (If the above is not checked) I have reviewed the AI-generated content before submitting.

### Additional comments

- The syntax is [baseline available](https://webstatus.dev/features/media-query-range-syntax) since 2023.
- The stylelint rule allows to select a preferred style (`prefix` (min-width: ...) or `context` (width > ...))