modified projects to fit on a grid, adjusted cards height

Author: basicavisual

src/components/Cards/CommunityCard.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div class="p-5 w-full md:w-1/3">
-  <a href="{route}">
+  <a href="{route}" target="_blank">
     <div class="border border-cmxyellow p-5 h-[150px] flex justify-between flex-col hover:bg-zinc-100 transition-colors duration-200">
       <h3 class="text-lg font-bold">{text}</h3>
       <img src="/flecha-amarilla.png" class="inline h-[20px] w-[20px] 

src/components/Cards/ProjectCard.svelte

@@ -13,7 +13,7 @@
 <div class="Card w-full min-h-[519px] flex-col justify-start items-start inline-flex">
   <img class="Image4 object-cover h-[200px] w-full" src={image} />
   <div class="Frame5 self-stretch min-h-[269px] h-full flex-col justify-start pt-3 items-start gap-4 flex">
-    <div class="Heading self-stretch min-h-[41px] flex-col justify-end items-start gap-8 flex">
+    <div class="Heading self-stretch min-h-[84px] flex-col justify-start items-start gap-8 flex">
       <div class="Heading self-stretch text-black text-[31.25px] font-bold font-['Albert Sans'] leading-10">
         {title}
       </div>
@@ -23,18 +23,18 @@
         {description}
       </div>
     </div>
-    <div class="Button justify-start items-center gap-2 inline-flex">
+    <!-- <div class="Button justify-start items-center gap-2 inline-flex">
       <div class="ConoceMS text-black text-base font-bold font-['Albert Sans'] leading-normal">
         {website}
       </div>
-    </div>
+    </div> -->
     <div>
       <p>{maker}</p>
     </div>
     <div class="flex flex-wrap gap-2">
 
       {#each tags as tag}
-        <Badge text={tag} color="#6596FF"/>
+        <Badge text={tag}/>
       {/each}
     </div>
     <div class="flex gap-3 my-2">

src/routes/proyectos/+page.svelte

@@ -35,17 +35,20 @@
     <Badge text="Datos abiertos" color="#F3F3F4"/>
     <Badge text="Código abierto" color="#F3F3F4"/>
   </div> -->
-  <div class="flex flex-col md:flex-row columns-3 container my-8 mx-auto gap-20">
+  <!-- <div class="flex flex-col basis-1/3 md:flex-row columns-3 container my-8 mx-auto gap-20"> -->
+    <div class="grid grid-cols-1 md:grid-cols-3 container my-8 mx-auto gap-20">
     {#each projects as project}
-      <ProjectCard
+      <div class="my-5">
+        <ProjectCard
         title={project.title}
         description={project.short_description}
         tags={project.tags || []}
         image={`https://content.codeandomexico.org/assets/${project.image}`}
         website={project.website}
         maker={project.maker}
         repository={project.repository}
-      />
+        />
+      </div>
     {/each}
   </div>
 </section>