Design polish

Author: karlcarstensen

docs-starlight/src/components/dv-OpenSourceCard.astro

@@ -7,13 +7,13 @@ const { icon, title, description, href } = Astro.props;
 
 <a
     aria-label={`Learn more about ${title}`}
-    class="opensourcecard group relative flex w-full items-center border border-dashed border-[var(--color-gray-3)] px-4 py-3 lg:px-8 lg:py-6 bg-[#FAFAFA] no-underline hover:bg-white hover:cursor-pointer transition-colors duration-200"
+    class="opensourcecard group relative flex w-full items-start border border-dashed border-[var(--color-gray-3)] px-4 py-4 lg:px-8 lg:py-8 bg-[#FAFAFA] no-underline hover:bg-white hover:cursor-pointer transition-colors duration-200"
     href={href}
     rel="noopener noreferrer"
     target="_blank"
 >
-    <div class="grid grid-cols-[1fr_24px] gap-2 w-full">
-      <div class="flex flex-col items-start">
+    <div class="grid grid-cols-[1fr_24px] gap-1 w-full">
+      <div class="flex flex-col gap-4 items-start">
           <div class="flex gap-1.5 items-center">
               <Image
                   alt={`${title} Icon`}
@@ -22,7 +22,7 @@ const { icon, title, description, href } = Astro.props;
               />
               <p class="text-lg font-semibold text-[var(--color-dark-blue-1)] m-0">{title}</p>
           </div>
-          <p class="text-sm font-sans text-[var(--color-gray-1)]">{description}</p>
+          <p class="text-sm font-sans text-[var(--color-gray-1)] m-0">{description}</p>
       </div>
       <div class="flex items-center justify-end">
           <div class="opacity-0 group-hover:opacity-100 transform transition-opacity duration-200">