More tailwind css for the win.

src/lib/components/Brand.svelte

@@ -25,10 +25,13 @@
 		width: 100%;
 		color: var(--mask-color);
 		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 
 	img {
-		width: 100%;
+		max-width: 100%;
+		max-height: 100%;
 	}
 
 	.masked {

src/lib/components/Header.svelte

@@ -8,7 +8,7 @@
 	export let links: Array<LinkConfig>;
 </script>
 
-<header class="flex flex-col gap-4">
+<header class="bg-red-300 flex flex-col justify-between gap-8 pt-12">
 	<section class="flex h-16 flex-row items-center gap-4">
 		<div class="h-16 w-16">
 			<a href="/">

src/lib/components/ServiceCard.svelte

@@ -16,24 +16,22 @@
 	}
 </script>
 
-<a href={service.url} target={service.target || ''}>
-	<div class="card">
-		<div class="card-content">
-			<div class="media">
-				<div class="media-left">
-					<figure class="image">
-						<Brand brand={brand()} />
-					</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>
+<a
+	class="min-h-24 flex w-full flex-row gap-2 rounded-2xl bg-neutral-600 bg-opacity-30 p-6 transition-all hover:-translate-y-2 focus:-translate-y-2 focus:outline-none"
+	href={service.url}
+	target={service.target || ''}
+>
+	<div class="flex flex h-12 w-12 flex-row text-4xl">
+		<Brand brand={brand()} />
+	</div>
+	<div>
+		<p class="text-xl">{service.title}</p>
+		<p class="text-md">
+			{#if component != undefined}
+				<svelte:component this={component} {data} />
+			{:else}
+				{service.subtitle}
+			{/if}
+		</p>
 	</div>
 </a>

src/lib/components/ServiceGroup.svelte

@@ -1,15 +1,15 @@
 <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>;
+	export let columns: number;
 </script>
 
-<div class="group">
-	<div class="header">
+<div>
+	<div class="mb-6 text-2xl">
 		<h3>
 			{#if group.icon}
 				<i class={group.icon} />
@@ -18,9 +18,20 @@
 		</h3>
 	</div>
 
-	<div class="services layout-{$layoutDirection}">
+	<div class={'gap-4' + ' layout-' + $layoutDirection} style={'--columns: ' + columns}>
 		{#each group.items as service, i}
 			<ServiceCard {service} data={groupData[i]} />
 		{/each}
 	</div>
 </div>
+
+<style>
+	.layout-row {
+		display: grid;
+		grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+	}
+	.layout-column {
+		display: flex;
+		flex-flow: row wrap;
+	}
+</style>