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
-    <div class="card-body break-words">
+    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>
 

src/pages/posts.astro

@@ -21,9 +21,25 @@ const sortedPosts = posts.sort(
             Posts
         </h1>
         <div
-            class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
+            class:list={[
+                sortedPosts.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",
+            ]}
         >
-            {sortedPosts.map((post) => <PostCard post={post} />)}
+            {
+                sortedPosts.map((post) => (
+                    <div
+                        class:list={[
+                            sortedPosts.length <= 2
+                                ? "w-full sm:w-96"
+                                : "inline-block break-inside-avoid w-full",
+                        ]}
+                    >
+                        <PostCard post={post} />
+                    </div>
+                ))
+            }
         </div>
 
         {

src/pages/resume.astro

@@ -141,7 +141,7 @@ if (!data) {
             data.summary &&
                 resumeConfig.sections.enabled.includes("summary") && (
                     <div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
-                        <div class="card-body p-4 sm:p-6 break-words">
+                        <div class="card-body p-4 sm:p-6 wrap-break-word">
                             <h2 class="card-title text-xl sm:text-2xl">
                                 {resumeConfig.sections.summary?.title ||
                                     "Summary"}
@@ -157,7 +157,7 @@ if (!data) {
                 data.skills.length > 0 &&
                 resumeConfig.sections.enabled.includes("skills") && (
                     <div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
-                        <div class="card-body p-4 sm:p-6 break-words">
+                        <div class="card-body p-4 sm:p-6 wrap-break-word">
                             <h2 class="card-title text-xl sm:text-2xl">
                                 {resumeConfig.sections.skills?.title ||
                                     "Skills"}
@@ -180,7 +180,7 @@ if (!data) {
                 data.experience.length > 0 &&
                 resumeConfig.sections.enabled.includes("experience") && (
                     <div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
-                        <div class="card-body p-4 sm:p-6 break-words">
+                        <div class="card-body p-4 sm:p-6 wrap-break-word">
                             <h2 class="card-title text-xl sm:text-2xl">
                                 {resumeConfig.sections.experience?.title ||
                                     "Experience"}
@@ -229,7 +229,7 @@ if (!data) {
                 data.education.length > 0 &&
                 resumeConfig.sections.enabled.includes("education") && (
                     <div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
-                        <div class="card-body p-4 sm:p-6 break-words">
+                        <div class="card-body p-4 sm:p-6 wrap-break-word">
                             <h2 class="card-title text-xl sm:text-2xl">
                                 {resumeConfig.sections.education?.title ||
                                     "Education"}
@@ -271,7 +271,7 @@ if (!data) {
                 data.volunteer.length > 0 &&
                 resumeConfig.sections.enabled.includes("volunteer") && (
                     <div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
-                        <div class="card-body p-4 sm:p-6 break-words">
+                        <div class="card-body p-4 sm:p-6 wrap-break-word">
                             <h2 class="card-title text-xl sm:text-2xl">
                                 {resumeConfig.sections.volunteer?.title ||
                                     "Volunteer Work"}
@@ -303,7 +303,7 @@ if (!data) {
                 data.awards.length > 0 &&
                 resumeConfig.sections.enabled.includes("awards") && (
                     <div class="card bg-base-300 shadow-xl mb-4 sm:mb-6">
-                        <div class="card-body p-4 sm:p-6 break-words">
+                        <div class="card-body p-4 sm:p-6 wrap-break-word">
                             <h2 class="card-title text-xl sm:text-2xl">
                                 {resumeConfig.sections.awards?.title ||
                                     "Awards & Recognition"}

src/pages/talks.astro

@@ -12,9 +12,25 @@ import { config } from "../config";
             Talks
         </h1>
         <div
-            class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
+            class:list={[
+                config.talks.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",
+            ]}
         >
-            {config.talks.map((talk) => <TalkCard talk={talk} />)}
+            {
+                config.talks.map((talk) => (
+                    <div
+                        class:list={[
+                            config.talks.length <= 2
+                                ? "w-full sm:w-96"
+                                : "inline-block break-inside-avoid w-full",
+                        ]}
+                    >
+                        <TalkCard talk={talk} />
+                    </div>
+                ))
+            }
         </div>
 
         {