style(storybook): unify page hierarchy and compact layouts

src/components/story-page.tsx

@@ -70,6 +70,12 @@ export function StorySection({
   )
 }
 
+// Sections side by side (e.g. two charts per row). The grid owns the row gap (the section gap), so rows line up the same
+// way as stacked sections; columns and alignment come from `className`.
+export function StorySectionGrid({ className, children }: { className?: string; children: ReactNode }) {
+  return <div className={className ? `sb-page-section-grid ${className}` : "sb-page-section-grid"}>{children}</div>
+}
+
 export const STORY_KICKER = {
   foundation: "HM DESIGN SYSTEM / FOUNDATION",
   components: "HM DESIGN SYSTEM / COMPONENTS",