mobile fixes and social link on homepage

src/lib/elements/Card.svelte

@@ -1,17 +1,21 @@
 
 <script>
     export let href;
-    export let picture;
+    export let picture = null;
     export let alt;
 </script>
 
 
 <a href={href} class="group relative shadow w-full bg-cover text-white rounded-lg hover:-translate-y-1 duration-300 overflow-hidden">
+    {#if picture}
         <img src={picture} class="bg-black rounded-lg group-hover:bg-gradient-to-b group-hover:from-rose-400 group-hover:to-red-900 duration-300 w-full h-full" alt={alt} />
+    {:else}
+        <div class="bg-red-400 rounded-lg group-hover:bg-gradient-to-b group-hover:from-rose-400 group-hover:to-red-900 duration-300 w-full h-full min-h-[200px]" alt={alt} />
+    {/if}
     <div class="absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-20 duration-300 rounded-lg"></div>
 
     <div class="absolute inset-0 flex justify-center items-center">
-        <h4 class="font-bold italic text-sm lg:text-3xl text-center drop-shadow-xl">
+        <h4 class="font-bold italic text-base lg:text-3xl text-center drop-shadow-xl">
             <slot />
         </h4>
     </div>

src/routes/index.svelte

@@ -47,7 +47,7 @@ import Social from "$lib/elements/Social.svelte";
     </section>
 
     <section class="container">
-        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
             <Card href="/commissions#icon" picture="/commissions/iconbasic.jpg" alt="commission info">
                 Icon <br/> Commissions
             </Card>
@@ -83,6 +83,10 @@ import Social from "$lib/elements/Social.svelte";
             <Card href="/commissions#fullbody" picture="/commissions/fullbodyultralineart.jpg" alt="commission info">
                 Fullbody <br/> Commissions
             </Card>
+
+            <Card href="/contact" alt="commission info">
+                Contact <br/> + <br/> Socials
+            </Card>
         </div>
     </section>
 </main>