Fix mini-card alignment

Author: ryanjduffy

src/app/page.tsx

@@ -83,7 +83,10 @@ const miniCards: CardAttributes[] = [
 
 export default function Page() {
   return (
-    <div data-test-id="page" className="mx-auto flex max-w-4xl flex-col px-4 py-8">
+    <div
+      data-test-id="page"
+      className="mx-auto flex max-w-4xl flex-col px-4 py-8"
+    >
       <Hero />
       <h2 className="py-8 text-2xl font-semibold">Topics</h2>
       <div className="grid place-items-center gap-4 pb-20 md:grid-cols-2 lg:grid-cols-3">
@@ -98,7 +101,7 @@ export default function Page() {
         ))}
       </div>
       <h2 className="pb-8 text-2xl font-semibold">Learn the basics</h2>
-      <div className="grid place-items-center gap-4 pb-20 md:grid-cols-2 lg:grid-cols-3">
+      <div className="grid place-items-stretch gap-4 pb-20 md:grid-cols-2 lg:grid-cols-3">
         {miniCards.map(({ href, content, icon, title }) => (
           <MiniCard
             key={href}

src/components/MiniCard.tsx

@@ -12,7 +12,7 @@ export default function MiniCard({
     <Link href={href} className="w-full">
       <li
         key={title}
-        className="col-span-1 flex rounded-md bg-gray-100/70 bg-opacity-30 shadow-md transition-colors hover:bg-gray-200/90 dark:bg-gray-950/50 dark:hover:bg-gray-900/50"
+        className="col-span-1 flex h-full items-start rounded-md bg-gray-100/70 bg-opacity-30 shadow-md transition-colors hover:bg-gray-200/90 dark:bg-gray-950/50 dark:hover:bg-gray-900/50"
       >
         <div className="flex justify-center pl-4 pt-3">
           <Icon icon={icon} className="h-6 w-6" />