feat: some shit

src/components/card/Content.svelte

@@ -2,6 +2,6 @@
   export let classes = "";
 </script>
 
-<div class="flex flex-1 flex-col gap-4 {classes} w-[66%]">
+<div class="flex flex-2 flex-col gap-4 {classes}">
   <slot />
 </div>

src/components/card/Image.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   export let alt: string;
   export let src: string;
-  export let width: number;
-  export let height: number;
+  export let width: number | undefined;
+  export let height: number | undefined;
 </script>
 
-<img {src} {alt} {width} {height} />
+<img {src} {alt} {width} {height} class="flex-1" />
 
 <style>
   img {

src/components/card/ReadMoreButton.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   export let link: string;
+  export let text = "read more";
 </script>
 
 <a
   href={link}
   data-astro-prefetch
   class="bg-light p-2 text-s rounded-md px-4 flex flex-0 items-center gap-2 w-fit"
->
-  read more <span class="i-tabler-arrow-right inline-block w-4 h-4" />
+  >{text}<span class="i-tabler-arrow-right inline-block w-4 h-4" />
 </a>

src/components/card/Title.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+  export let classes = "";
 </script>
 
-<h2 class="text-2xl">
+<h2 class="text-3xl {classes}">
   <slot />
 </h2>

src/components/card/Wrapper.svelte

@@ -2,18 +2,8 @@
   export let classes = "flex bg";
 </script>
 
-<div class="relative rounded-diag-md {classes} noise">
+<div
+  class="relative rounded-diag-md {classes} noise card-wrapper items-stretch"
+>
   <slot />
 </div>
-
-<style>
-  .card-wrapper {
-    align-items: stretch;
-
-    min-height: 200px;
-    border: solid thin var(--outline);
-    max-width: 100%;
-    max-height: 300px;
-    overflow: hidden;
-  }
-</style>