menu style update

src/components/Menu/styles.css

@@ -1,43 +1,41 @@
 .menu {
     display: flex;
     align-items: flex-start;
+    flex-wrap: wrap;
 
     list-style: none;
 }
 
 .menuItem {
     position: relative;
-    border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
+    border-top: var(--menu-mark-thickness) solid rgba(0, 0, 0, 0);
 }
 
-.menuItem.desktop {
-    padding: 0.3em 0.2em 0;
-    margin-right: 1em;
-
-    font-size: var(--normal-font-size);
-}
+/* MOBILE */
 
 .menuItem.mobile {
-    padding: 0.3em 0.5em;
-    margin-bottom: var(--half-margin);
+    flex-direction: column;
 
     font-size: 1.25em;
-    /* color: white; */
     color: var(--color-text-opposite);
 }
 
-.menuItem:last-child {
-    margin-right: 0;
-}
-
-.menuItem.selected {
-    font-weight: bold;
-}
-
 .menuItem.mobile.selected {
     background-color: var(--color-back-opposite);
 }
 
+/* DESKTOP */
+
+.menuItem.desktop {
+    padding: var(--size-xs) var(--size-s);
+    margin-bottom: var(--size-s);
+    margin-right: var(--size-s);
+}
+
+.menuItem.desktop:last-child {
+    margin-right: 0;
+}
+
 .menuItem.desktop.selected {
     border-top-color: var(--color-back-opposite);
 }