diff --git a/src/app/shared/PersonList.svelte b/src/app/shared/PersonList.svelte
index 19f09446..e853af0e 100644
--- a/src/app/shared/PersonList.svelte
+++ b/src/app/shared/PersonList.svelte
@@ -40,7 +40,7 @@
   })
 </script>
 
-<Content gap={2}>
+<Content gap="gap-2">
   {#each $people || [] as person}
     <PersonInfo {person} />
   {:else}
diff --git a/src/partials/Content.svelte b/src/partials/Content.svelte
index 147d8e3e..aaafd840 100644
--- a/src/partials/Content.svelte
+++ b/src/partials/Content.svelte
@@ -1,10 +1,10 @@
 <script>
   import cx from "classnames"
 
-  export let gap = 6
+  export let gap = "gap-6"
   export let size = "2xl"
 
-  const className = `flex flex-col m-auto text-gray-2 gap-${gap} overflow-hidden`
+  const className = `flex flex-col m-auto text-gray-2 ${gap} overflow-hidden`
 
   if (!["inherit", "lg", "2xl"].includes(size)) {
     throw new Error(`Invalid size: ${size}`)