Migrate to astro

src/components/container.astro

@@ -1,7 +1,16 @@
 ---
-const { class: className } = Astro.props;
+type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12;
+
+export interface Props {
+  as?: string;
+  class?: string;
+  gap?: Gap;
+}
+
+const { as: Tag = "div", class: className = "", gap = 0 } = Astro.props;
+const gapClass = gap === 0 ? "" : `gap-${gap}`;
 ---
 
-<div class:list={["max-w-(--breakpoint-xl) mx-auto px-5", className]}>
+<Tag class:list={["flex flex-col p-4 sm:p-6 lg:p-8 max-w-3xl mx-auto w-full", gapClass, className]}>
   <slot />
-</div>
+</Tag>