💄(frontend) introduce a new breaking point

Needed a trade off between xs and sm breaking points.
Introduce xsm, I am not very satisfied with this naming.
We might refactor xs in xss. Not urgent.

src/frontend/panda.config.ts

@@ -40,6 +40,7 @@ const config: Config = {
     // media queries are defined in em so that zooming with text-only mode triggers breakpoints
     breakpoints: {
       xs: '22.6em', // 360px (we assume less than that are old/entry level mobile phones)
+      xsm: '31.25em', // 500px,
       sm: '40em', // 640px
       md: '48em', // 768px
       lg: '64em', // 1024px