fix: gap

packages/website-ue/src/components/HomeTanks.astro

@@ -21,7 +21,7 @@ const strings = await api.strings(locale);
   }
 </style>
 
-<Section>
+<Section gap="4">
   <Heading size="2" className="title">{strings.home.tanks}</Heading>
 
   <HomeTanksPopular {locale} client:load />

packages/website-ue/src/components/Section/index.module.css

@@ -9,7 +9,6 @@
 
     display: flex;
     flex-direction: column;
-    gap: var(--space-5);
   }
 
   &[data-first="true"] .content {

packages/website-ue/src/components/Section/index.tsx

@@ -1,19 +1,28 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
+import type { Space } from "../../types/space";
 import styles from "./index.module.css";
 
 export interface SectionProps extends ComponentProps<"div"> {
   first?: boolean;
+  gap: Space;
 }
 
-export function Section({ className, children, ...props }: SectionProps) {
+export function Section({
+  className,
+  gap = "5",
+  children,
+  ...props
+}: SectionProps) {
   return (
     <div
       data-first={props.first}
       className={classNames(styles.section, className)}
       {...props}
     >
-      <div className={styles.content}>{children}</div>
+      <div className={styles.content} style={{ gap: `var(--space-${gap})` }}>
+        {children}
+      </div>
     </div>
   );
 }