fix(frontend): adjust media queries for newer postcss style (#11892)

src/frontend/src/main.css.ts

@@ -35,9 +35,11 @@ export const layoutHeaderUser = style({
   [vars.lightSelector]: { color: vars.colors.black },
   [vars.darkSelector]: { color: vars.colors.dark[0] },
 
+  '@media': {
     [vars.smallerThan('xs')]: {
       display: 'none'
     }
+  }
 });
 
 export const headerDropdownFooter = style({
@@ -69,11 +71,13 @@ export const link = style({
   [vars.lightSelector]: { color: vars.colors.black },
   [vars.darkSelector]: { color: vars.colors.white },
 
+  '@media': {
     [vars.smallerThan('sm')]: {
       height: rem(42),
       display: 'flex',
       alignItems: 'center',
       width: '100%'
+    }
   },
 
   ':hover': {
@@ -92,9 +96,11 @@ export const layoutContent = style({
 });
 
 export const tabs = style({
+  '@media': {
     [vars.smallerThan('sm')]: {
       display: 'none'
     }
+  }
 });
 
 export const tabsList = style({