From 9dfcf6f00698b472753b96117c59a5f8e1c536ea Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Mon, 9 Mar 2026 16:37:44 -0500
Subject: [PATCH] feat: make cards fixed height

---
 src/components/cards/BlogCard.astro          | 8 ++++----
 src/components/cards/LargeCategoryCard.astro | 2 +-
 src/pages/all.astro                          | 6 ++----
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/cards/BlogCard.astro b/src/components/cards/BlogCard.astro
index a320b0f..9f429d1 100644
--- a/src/components/cards/BlogCard.astro
+++ b/src/components/cards/BlogCard.astro
@@ -16,13 +16,13 @@ const { post } = Astro.props;
 
 <div class="smooth-reveal-cards group flex flex-col">
   <a
-    class="card-base border-none!"
+    class="card-base border-none! h-full flex flex-col"
     href={`/blog/${post.slug}/`}
     data-astro-prefetch
   >
     <div class="relative shrink-0 rounded-t-xl w-full overflow-hidden before:absolute before:inset-x-0 before:z-1 before:size-full">
       <Image
-        class="rounded-t-xl h-auto w-full"
+        class="rounded-t-xl h-64 w-full object-cover"
         src={getDirectusImageURL(post.image)}
         alt={post.image_alt}
         draggable="false"
@@ -31,11 +31,11 @@ const { post } = Astro.props;
         inferSize={true}
       />
     </div>
-    <div class="rounded-xl p-4 md:p-5">
+    <div class="rounded-xl p-4 md:p-5 flex flex-col flex-1">
       <h3 class="card-text-title text-xl">
         {post.title}
       </h3>
-      <div class="ml-6 flex">
+      <div class="ml-6 flex mt-auto">
         <div class="relative inline-block w-full">
           <div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4">
             <span class="relative inline-block overflow-hidden ml-2">
diff --git a/src/components/cards/LargeCategoryCard.astro b/src/components/cards/LargeCategoryCard.astro
index 3d45a01..eda6cf1 100644
--- a/src/components/cards/LargeCategoryCard.astro
+++ b/src/components/cards/LargeCategoryCard.astro
@@ -15,7 +15,7 @@ interface Props {
 const { url, title, description, logoLight, logoDark, count, publishDate } = Astro.props;
 ---
 
-<div class="smooth-reveal flex flex-col mx-auto w-full">
+<div class="smooth-reveal-cards flex flex-col mx-auto w-full">
   <a
     class="card-base flex flex-col h-full min-h-55"
     href={url}
diff --git a/src/pages/all.astro b/src/pages/all.astro
index 5e89b1b..1fad523 100644
--- a/src/pages/all.astro
+++ b/src/pages/all.astro
@@ -44,11 +44,9 @@ const posts = await directus.request(
   />
 
   <section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
-    <div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
       {posts.map((b) => 
-      <div class="break-inside-avoid mb-6">
-        <BlogCard post={b} />
-      </div>
+      <BlogCard post={b} />
       )}
     </div>
   </section>