fix: Improve alignment consistency

adfinis · Jan 10, 2025 · d33d09c · d33d09c
1 parent f912c44
commit d33d09c
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/nextjs/src/components/cards/card-icon.tsx b/nextjs/src/components/cards/card-icon.tsx
@@ -21,26 +21,26 @@ const CardIcon: React.FC<CardIconProps> = ({
   cta,
 }) => {
   return (
-    <div data-component="CardIcon" className="bg-white rounded-xl px-6 pt-6 pb-8 shadow-2 grid gap-6 divide-vertical-6 justify-items-center" data-scheme="light">
+    <div data-component="CardIcon" className="bg-white rounded-xl px-6 pt-6 pb-8 shadow-2 flex flex-col justify-start" data-scheme="light">
       {imageUrl && (
         <Image
           alt={title}
           src={imageUrl}
           width={300}
           height={300}
-          className="max-h-20"
+          className="h-20 mb-6 mx-auto"
         />
       )}
-      <Title level={3} boldness={"semibold"} align={"center"}>
+      <Title level={3} boldness={"semibold"} align={"center"} className="mb-6 lg:mb-1 lg:min-h-[2lh]">
         {title}
       </Title>
-      <Text markdown={description} className="text-center " />
+      <Text markdown={description} className="text-center self-start lg:flex-grow mb-6" />
       {cta && (
         <Link
           href={cta.href}
           variant={"secondary"}
           size={"small"}
-          className="px-4"
+          className="px-4 self-center"
         >
           {cta.text}
         </Link>