Makes the layout responsive

src/lib/components/Brand.svelte

@@ -22,9 +22,10 @@
 
 <style>
 	div {
-		width: 100%;
 		height: 100%;
+		width: 100%;
 		color: var(--mask-color);
+		display: flex;
 	}
 
 	img {

src/lib/components/ServiceCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { ServiceConfig } from '$lib/config';
 	import { getServiceComponent } from '$lib/services/services';
+	import Brand from './Brand.svelte';
 
 	export let service: ServiceConfig;
 	export let data: any;
@@ -8,9 +9,22 @@
 	const component = getServiceComponent(service.type || '');
 </script>
 
-<div class="service-card">
-	<p>{service.title}</p>
-	{#if component != undefined}
-		<svelte:component this={component} {data} />
-	{/if}
+<div class="card">
+	<div class="card-content">
+		<div class="media">
+			<div class="media-left">
+				<figure class="image">
+					<Brand brand={service} />
+				</figure>
+			</div>
+			<div class="media-content">
+				<p class="title is-4">{service.title}</p>
+				{#if component != undefined}
+					<p class="subtitle is-6"><svelte:component this={component} {data} /></p>
+				{:else}
+					<p class="subtitle is-6">{service.subtitle}</p>
+				{/if}
+			</div>
+		</div>
+	</div>
 </div>

src/lib/components/ServiceGroup.svelte

@@ -1,14 +1,26 @@
 <script lang="ts">
 	import type { ServiceGroupConfig } from '$lib/config';
 	import { layoutDirection } from '$lib/stores/layout';
+	import Brand from './Brand.svelte';
 	import ServiceCard from './ServiceCard.svelte';
 
 	export let group: ServiceGroupConfig;
 	export let groupData: Array<unknown>;
 </script>
 
-<div class="service-group layout-{$layoutDirection}">
-	{#each group.items as service, i}
-		<ServiceCard {service} data={groupData[i]} />
-	{/each}
+<div class="group">
+	<div class="header">
+		<h3>
+			{#if group.icon}
+				<i class={group.icon} />
+			{/if}
+			{group.title}
+		</h3>
+	</div>
+
+	<div class="services layout-{$layoutDirection}">
+		{#each group.items as service, i}
+			<ServiceCard {service} data={groupData[i]} />
+		{/each}
+	</div>
 </div>