Made card grids not ass

src/components/PostCard.astro

@@ -10,15 +10,17 @@ const { title, description: blurb, pubDate } = post.data;
 const { slug } = post;
 ---
 
-<div class="card bg-accent text-accent-content w-full max-w-sm shrink shadow-md">
-    <div class="card-body break-words">
+<div
+    class="card bg-accent text-accent-content w-full shadow-lg hover:shadow-xl transition-shadow mb-4 sm:mb-6"
+>
+    <div class="card-body wrap-break-word">
         <h2
-            class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words"
+            class="card-title text-xl md:text-2xl font-bold justify-center text-center wrap-break-word"
         >
             {title}
         </h2>
 
-        <p class="text-center break-words my-4">
+        <p class="text-center wrap-break-word my-4">
             {blurb || "No description available."}
         </p>
 

src/components/ProjectCard.astro

@@ -11,7 +11,7 @@ const { project } = Astro.props;
 ---
 
 <div
-    class="card bg-accent text-accent-content w-full max-w-sm shrink shadow-lg hover:shadow-xl transition-shadow"
+    class="card bg-accent text-accent-content w-full shadow-lg hover:shadow-xl transition-shadow mb-4 sm:mb-6"
 >
     <div class="card-body">
         <h2

src/components/ProjectsIsland.astro

@@ -49,9 +49,25 @@ const sortedProjects = projectsWithGiteaInfo.sort((a, b) => {
 ---
 
 <div
-    class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
+    class:list={[
+        sortedProjects.length <= 2
+            ? "flex flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto px-4"
+            : "columns-1 sm:columns-2 lg:columns-3 gap-4 sm:gap-6 max-w-6xl mx-auto px-4",
+    ]}
 >
-    {sortedProjects.map((project) => <ProjectCard project={project} />)}
+    {
+        sortedProjects.map((project) => (
+            <div
+                class:list={[
+                    sortedProjects.length <= 2
+                        ? "w-full sm:w-96"
+                        : "inline-block break-inside-avoid w-full",
+                ]}
+            >
+                <ProjectCard project={project} />
+            </div>
+        ))
+    }
 </div>
 
 {

src/components/TalkCard.astro

@@ -10,16 +10,16 @@ const { talk } = Astro.props;
 ---
 
 <div
-    class="card bg-accent text-accent-content shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
+    class="card bg-accent text-accent-content w-full shadow-lg hover:shadow-xl transition-shadow mb-4 sm:mb-6"
 >
-    <div class="card-body p-6 break-words">
+    <div class="card-body p-6 wrap-break-word">
         <h2
-            class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words"
+            class="card-title text-xl md:text-2xl font-bold justify-center text-center wrap-break-word"
         >
             {talk.name}
         </h2>
 
-        <p class="text-center break-words my-4">
+        <p class="text-center wrap-break-word my-4">
             {talk.description}
         </p>