feat: added compulsory tags

src/lib/components/SpaceCard.svelte

@@ -9,17 +9,21 @@
     }
 
     const { space, alt, imgSrc, href }: Props = $props();
+    import CompulsoryTags from "./CompulsoryTags.svelte";
 </script>
 
 <a class="card" {href}>
     <img src={imgSrc} {alt} />
     <div class="description">
         <h1>{space.location}</h1>
-        <div class="tagContainer">
-            {#each space.tags as tag (tag)}
-                <span class="tag">{tag}</span>
-            {/each}
-        </div>
+        <div class="compulsoryContainer"><CompulsoryTags {space} /></div>
+        {#if space.tags.length > 0}
+            <div class="tagContainer">
+                {#each space.tags as tag (tag)}
+                    <span class="tag">{tag}</span>
+                {/each}
+            </div>
+        {/if}
     </div>
 </a>
 
@@ -55,11 +59,14 @@
         gap: 0.4rem;
         border-radius: 0.5rem;
         background: none;
+        padding-top: 0.5rem;
     }
 
     .tag {
         display: flex;
         align-items: center;
+        justify-content: center;
+        text-align: center;
         border-radius: 0.25rem;
         background-color: #2e4653;
         color: #eaffeb;
@@ -67,4 +74,11 @@
         cursor: pointer;
         padding: 0.2rem 0.6rem;
     }
+
+    .compulsoryContainer {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.5rem;
+        font-size: 0.875rem;
+    }
 </style>