change mobile and desktop view

1 files changed, 22 insertions, 1 deletions

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0137351e..f551f9f7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -18,7 +18,7 @@ body {
 }
 
 #__next main {
-    @apply min-h-screen
+    @apply min-h-screen;
 }
 
 button {
@@ -380,3 +380,24 @@ button {
 .form-select__control--menu-is-open {
     @apply !border-yellow_r-9;
 }
+
+.category-box {
+    @apply py-2 border border-gray_r-6;
+}
+
+.category-box > div {
+    @apply relative text-gray_r-12/80;
+}
+
+.category-box a {
+    @apply py-2.5 px-4 idt-transition text-gray_r-12/80 hover:bg-gray_r-4;
+}
+
+.category-box a + div {
+    @apply absolute left-[100%] top-0 w-[40vw] bg-gray_r-1 border border-gray_r-6 p-4 hidden;
+}
+
+.category-box a:hover + div,
+.category-box a + div:hover {
+    @apply block;
+}