Refactor CSS layout and styling for improved component structure

assets/style.css

@@ -95,6 +95,9 @@ body::after {
     max-width: 64rem;
     margin: 0 auto;
     padding: 2rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
 }
 
 .grid {
@@ -194,7 +197,7 @@ body::after {
     height: 12rem;
     border-radius: calc(var(--radius) + 0.25rem);
     object-fit: cover;
-    margin-bottom: 1.5rem;
+    margin-bottom: 2rem;
     border: 1px solid hsl(var(--border));
     background: hsl(var(--secondary));
 }
@@ -207,27 +210,35 @@ body::after {
 }
 
 .stat-item {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas: 
+        "icon label"
+        "value value";
     gap: 0.75rem;
     padding: 1.25rem;
     background: hsl(var(--secondary));
     border-radius: var(--radius);
+    align-items: center;
 }
 
 .stat-item .icon {
+    grid-area: icon;
     width: 1.5rem;
     height: 1.5rem;
     color: hsl(var(--primary));
 }
 
 .stat-label {
+    grid-area: label;
     font-size: 0.875rem;
     font-weight: 500;
     color: hsl(var(--muted-foreground));
+    margin-left: 0.75rem;
 }
 
 .stat-value {
+    grid-area: value;
     font-size: 1.5rem;
     font-weight: 600;
     color: hsl(var(--card-foreground));
@@ -248,11 +259,17 @@ body::after {
 .info-section-header {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    padding-bottom: 0.5rem;
+    gap: 0.75rem;
+    padding-bottom: 0.75rem;
     border-bottom: 1px solid hsl(var(--border));
 }
 
+.info-section-header .icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: hsl(var(--primary));
+}
+
 .info-title {
     font-size: 0.875rem;
     font-weight: 600;
@@ -266,9 +283,17 @@ body::after {
 }
 
 .info-header {
-    display: flex;
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 1fr;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.75rem;
+}
+
+.info-header .icon {
+    width: 1rem;
+    height: 1rem;
+    color: hsl(var(--muted-foreground));
 }
 
 .info-label {
@@ -279,39 +304,26 @@ body::after {
 .info-value {
     font-size: 0.875rem;
     color: hsl(var(--card-foreground));
-    padding-left: 1.75rem;
+    margin-left: 1.75rem;
 }
 
 .info-link {
     color: hsl(var(--primary));
     text-decoration: none;
     font-size: 0.875rem;
-    padding-left: 1.75rem;
+    margin-left: 1.75rem;
 }
 
 .info-link:hover {
     text-decoration: underline;
 }
 
-/* Icons */
-.icon {
-    width: 1rem;
-    height: 1rem;
-    color: hsl(var(--muted-foreground));
-    flex-shrink: 0;
-}
-
-.info-header .icon {
-    position: absolute;
-    margin-left: 0.25rem;
-}
-
 /* Badge List */
 .badge-list {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
-    padding-left: 1.75rem;
+    margin-left: 1.75rem;
 }
 
 /* Badges and Tags */
@@ -365,4 +377,11 @@ code {
     text-align: center;
     padding: 3rem;
     color: hsl(var(--muted-foreground));
+}
+
+/* Content Layout */
+#content {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
 }