Use CSS subgrid to align cards (#19)

docs/index.mdx

@@ -21,8 +21,9 @@ References:
 * [Widgets](./widgets)
 
 ## Features
+
 <CardGroup>
-	<Card href="features/preview" icon="fa-file" title="File Previews" description="Preview widgets let you view markdown, images, video, CSVs, and more inline." />
+	<Card href="features/preview" icon="fa-file-magnifying-glass" title="File Previews" description="Preview widgets let you view markdown, images, video, CSVs, and more inline." />
 	<Card href="features/remotes" icon="fa-server" title="Reliable Remote Connections" description="Automatic reconnection, remote file previews, and more." />
 	<Card href="features/ai" icon="fa-sparkles" title="Integrated AI" description="Inline AI Chat Windows hooked up to any LLM (local or remote)." />
 	<Card href="features/browser" icon="fa-globe" title="Inline Web Browser" description="Access online content without switching context." />

src/components/card.css

@@ -1,19 +1,49 @@
+.card-group {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: auto;
+    gap: 1rem;
+}
+
+@media (max-width: 600px) {
+    .card-group {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (600px < width <= 800px) {
+    .card-group {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
 .card {
-    display: flex;
-    flex-direction: column;
-    flex: 0 1 14rem;
-    gap: 10px;
-    padding: 10px 10px;
-    min-height: 14rem;
-    max-height: 14rem;
-    overflow: hidden;
+    display: grid;
+    grid-template-columns: 1.5rem 1rem 1fr;
+    grid-template-rows: subgrid;
+    grid-column: span 1;
+    grid-row: span 2;
+    padding: 1rem;
+    gap: 0;
 
     .icon {
-        font-size: 1.5em;
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 1.5rem;
+    }
+
+    .title {
+        grid-column: 3;
+        grid-row: 1;
+        font-weight: bold;
+        font-size: 1.2rem;
+        margin-top: -0.25rem;
     }
 
     .description {
         color: var(--ifm-font-color-base);
+        grid-column: span 3;
+        grid-row: 2;
     }
 
     border: 2px solid var(--ifm-color-primary-lightest);
@@ -26,10 +56,3 @@
     transform: translateZ(0) scale(1.024);
     -webkit-transform: translateZ(0) scale(1.024);
 }
-
-.card-group {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 10px;
-}

src/components/card.tsx

@@ -12,8 +12,8 @@ export function Card({ icon, title, description, href }: CardProps) {
     return (
         <a className="card" href={href}>
             <div className={clsx("icon", "fa-sharp fa-regular", icon)} />
-            <h2 className="title">{title}</h2>
-            <p className="description">{description}</p>
+            <div className="title">{title}</div>
+            <div className="description">{description}</div>
         </a>
     );
 }