refactor: break out Section container

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -1,13 +1,12 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Grids from "@/components/TempDesignSystem/Grids"
 
 import StayCard from "../StayCard"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
-import styles from "./soonest.module.css"
-
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function SoonestStays({
@@ -22,7 +21,7 @@ export default async function SoonestStays({
   }
 
   return (
-    <section className={styles.container}>
+    <SectionContainer>
       <Header title={title} subtitle={subtitle} link={link} />
       {response.data.length ? (
         <Grids.Stackable>
@@ -37,6 +36,6 @@ export default async function SoonestStays({
       ) : (
         <EmptyUpcomingStaysBlock />
       )}
-    </section>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Stays/Soonest/soonest.module.css

@@ -1,4 +0,0 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x2);
-}