feat: add initial mobile layout for earn and burn

components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css

@@ -1,8 +1,29 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  overflow-x: auto;
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.mobileTable {
+  border-spacing: 0;
+  width: 100%;
+}
+
+.mobileThead {
+  background-color: var(--Main-Grey-10);
+}
+
+.mobileTh {
+  padding: var(--Spacing-x2);
+}
+
+.mobilePlaceholder {
+  text-align: center;
+  padding: var(--Spacing-x4);
+  border: 1px solid var(--Main-Grey-10);
+}
+
+.tableContainer {
+  display: none;
 }
 
 .table {
@@ -12,9 +33,9 @@
 }
 
 .thead {
-  background-color: var(--Base-Fill-Normal);
-  border-left: 1px solid var(--Base-Fill-Normal);
-  border-right: 1px solid var(--Base-Fill-Normal);
+  background-color: var(--Main-Grey-10);
+  border-left: 1px solid var(--Main-Grey-10);
+  border-right: 1px solid var(--Main-Grey-10);
 }
 
 .tr {
@@ -35,5 +56,18 @@
   width: 100%;
   padding: 24px;
   text-align: center;
-  border: 1px solid var(--Base-Fill-Normal);
+  border: 1px solid var(--Main-Grey-10);
+}
+
+@media screen and (min-width: 950px) {
+  .mobileTableContainer {
+    display: none;
+  }
+
+  .tableContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    overflow-x: auto;
+  }
 }