docs: minor style refactor (#486)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Documentation**
- Updated the "Getting Started" page layout using new grid components
for better organization.
	- Reorganized content into distinct sections for clarity.
- Enhanced visual presentation with updated styles and layout
adjustments.
	- Changed the background color for improved readability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/documentation/.ladle/styles.css

@@ -12,7 +12,7 @@
 	html,
 	body,
 	.ladle-background {
-		background-color: #f9fafb;
+		background-color: #f0f0f0;
 	}
 }
 @media (prefers-color-scheme: dark) {

packages/documentation/src/GettingStarted/1-overview.stories.tsx

@@ -42,40 +42,45 @@ export const Overview: Story<any> = () => (
 			</div>
 		</div>
 
-		<h2>Features</h2>
+		<Flexgrid>
+			<FlexgridItem span={{ fallback: 12, lg: 6 }}>
+				<h2>Features</h2>
 
-		<ul>
-			<li>
-				<strong>Strong</strong>: built-in components typing via TypeScript.
-			</li>
-			<li>
-				<strong>Responsive</strong>: built-in responsive components.
-			</li>
-			<li>
-				<strong>Accessible</strong>: built with accessibility in mind from the
-				start.
-			</li>
-		</ul>
+				<ul>
+					<li>
+						<strong>Strong</strong>: built-in components typing via TypeScript.
+					</li>
+					<li>
+						<strong>Responsive</strong>: built-in responsive components.
+					</li>
+					<li>
+						<strong>Accessible</strong>: built with accessibility in mind from
+						the start.
+					</li>
+				</ul>
+			</FlexgridItem>
+			<FlexgridItem span={{ fallback: 12, lg: 6 }}>
+				<h2>Extra</h2>
 
-		<h2>Extra</h2>
-
-		<ul>
-			<li>
-				<strong>TailwindCSS</strong>: built with TailwindCSS, enabling styles
-				tree-shaking.
-			</li>
-			<li>
-				<strong>Hooks</strong>: provides a set of hooks to use in your
-				application.
-			</li>
-			<li>
-				<strong>Icons</strong>: provides a set of icons to use in your
-				application.
-			</li>
-			<li>
-				<strong>Theming</strong>: provides a theming system to customize the
-				look of the components.
-			</li>
-		</ul>
+				<ul>
+					<li>
+						<strong>TailwindCSS</strong>: built with TailwindCSS, enabling
+						styles tree-shaking.
+					</li>
+					<li>
+						<strong>Hooks</strong>: provides a set of hooks to use in your
+						application.
+					</li>
+					<li>
+						<strong>Icons</strong>: provides a set of icons to use in your
+						application.
+					</li>
+					<li>
+						<strong>Theming</strong>: provides a theming system to customize the
+						look of the components.
+					</li>
+				</ul>
+			</FlexgridItem>
+		</Flexgrid>
 	</>
 );