릴리스: v0.1.20 게임 카드 3열 레이아웃 정리

frontend/src/views/GameHubView.vue

@@ -148,17 +148,22 @@ function openTierList(id) {
 }
 .list {
   display: grid;
-  gap: 10px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
 }
 .row {
   text-align: left;
-  padding: 12px;
-  border-radius: 14px;
+  padding: 14px;
+  border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.92);
   cursor: pointer;
   width: 100%;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  min-height: 168px;
 }
 .row:hover {
   background: rgba(255, 255, 255, 0.05);
@@ -166,13 +171,13 @@ function openTierList(id) {
 .row__title {
   font-weight: 800;
   min-width: 0;
+  font-size: 18px;
+  line-height: 1.35;
 }
 .row__head {
-  display: flex;
+  display: grid;
   gap: 12px;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
+  align-content: start;
 }
 .row__author {
   display: inline-flex;
@@ -198,7 +203,17 @@ function openTierList(id) {
 }
 .row__meta {
   opacity: 0.78;
-  margin-top: 6px;
   font-size: 13px;
+  margin-top: auto;
+}
+@media (max-width: 1100px) {
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 720px) {
+  .list {
+    grid-template-columns: 1fr;
+  }
 }
 </style>