fix(css): correct boundaries of breaking points

We mixed the logic of breaking points (when to break),
this makes it consistent:
Mobile breaking point is 1024px, so it is applied to width < 1024 and starting with 1024 its "normal".

So we consistently have:
width < 512px: small mobile
512 <= width < 1024px: mobile
width >= 1024px: normal

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

core/css/apps.scss

@@ -7,7 +7,7 @@
 @use 'sass:math';
 @use 'functions';
 
-@media screen and (max-width: variables.$breakpoint-mobile) {
+@media screen and (width < #{variables.$breakpoint-mobile}) {
 	// Make the body full width on mobile
 	:root {
 		--body-container-margin: 0px !important;
@@ -715,7 +715,7 @@ body[dir='rtl'] {
 	}
 }
 
-@media only screen and (max-width: variables.$breakpoint-mobile) {
+@media only screen and (width < #{variables.$breakpoint-mobile}) {
 	#content {
 		border-start-start-radius: var(--border-radius-large);
 		border-start-end-radius: var(--border-radius-large);