feat: responsive card pages

src/pages/HomePage/HomePage.css

@@ -1,35 +1,14 @@
 .home-page {
   width: 100%;
   height: 100%;
-  position: relative;
 
   display: flex;
   align-items: center;
   justify-content: center;
-}
 
-.status-block {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  flex-shrink: 0;
-}
+  padding: var(--space-6);
 
-.status-label {
-  font-weight: 500;
-  transition: color var(--dur-base) var(--ease-standard);
-}
-
-.status-label--connected {
-  color: var(--accent-live);
-}
-
-.status-label--connecting {
-  color: var(--accent-connecting);
-}
-
-.status-label--disconnected {
-  color: var(--text-muted);
+  box-sizing: border-box;
 }
 
 .specs {
@@ -50,18 +29,30 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  gap: var(--space-4);
 }
 
 .spec dt {
   color: var(--text-muted);
+  font-size: var(--font-md);
 }
 
 .spec dd {
   margin: 0;
+
   color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-md);
 }
 
-.panel-actions {
+.home-panel-actions {
   display: flex;
   justify-content: flex-end;
 }
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}