Add CSS range syntax to breakpoints settings page

templates/docs/settings/breakpoint-settings.md

@@ -20,31 +20,31 @@ Vanilla uses three main breakpoints for screen sizes, below you can see the sett
 ## Target small screens
 
 ```css
-@media screen and (max-width: $breakpoint-small - 1) {
+@media screen and (width < $breakpoint-small) {
   // css
 }
 ```
 
 ## Target medium size screens
 
 ```css
-@media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+@media screen and ($breakpoint-small <= width < $breakpoint-large) {
   // css
 }
 ```
 
 ## Target large screens
 
 ```css
-@media screen and (min-width: $breakpoint-large) {
+@media screen and ($breakpoint-large <= width) {
   //css
 }
 ```
 
 ## Target extra large screens
 
 ```css
-@media screen and (min-width: $breakpoint-x-large) {
+@media screen and ($breakpoint-x-large <= width) {
   //css
 }
 ```