src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css

@@ -1,6 +1,7 @@
 .row {
     display: grid;
     grid-template-columns: 48px 5fr 70px 2fr 3fr 60px 30px 30px;
+    grid-gap: 8px;
     text-wrap: nowrap;
     height: 64px;
     background: var(--input-secondary);
@@ -14,6 +15,10 @@
     font-weight: bold;
 }
 
+.release-date, .storage, .max-value {
+    color: rgb(184, 184, 184);
+}
+
 .pill {
     width: fit-content;
     height: 24px;
@@ -31,9 +36,40 @@
 .platform-pill {
     color: var(--violet); 
     cursor: pointer;
-
+    text-decoration: none;
 }
 
     .platform-pill:hover {
         text-decoration: underline;
-    }
+    }
+
+.detail {
+    transform: scale(0.8, 1.2) rotate(-90deg);
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
+
+::deep .detail svg {
+    fill: var(--white);
+}
+
+.value {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.max-value {
+    translate: 0 200px;
+}
+
+@media screen and (max-width: 800px) {
+    .row {
+        grid-template-columns: 48px 5fr 2fr 3fr 30px 30px;
+    }
+
+    .release-date, .storage {
+        display: none;
+    }
+}