From e889228e55d3074a0ac223faa9a6e0c26c825e03 Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Wed, 28 Aug 2024 20:16:07 +0530
Subject: [PATCH] feat: fiddle with margins to achieve perfect spacing

---
 src/pages/main/Home.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/pages/main/Home.tsx b/src/pages/main/Home.tsx
index bc38d98..0351bdd 100644
--- a/src/pages/main/Home.tsx
+++ b/src/pages/main/Home.tsx
@@ -14,10 +14,21 @@ const section = css`
 
 const Home: React.FC = () => {
 	return (
-		<Container>
-			<section>
+		<Container
+			className={css`
+				--distance: 2rem;
+			`}>
+			<section
+				style={{
+					// fiddle
+					marginLeft: "-0.3rem",
+				}}>
 				<h1>MKRhere</h1>
 				<FlickerList
+					style={{
+						// fiddle
+						marginTop: "calc(-1.7rem - 2px + var(--distance))",
+					}}
 					list={[
 						{
 							text: "Designer",
@@ -39,6 +50,9 @@ const Home: React.FC = () => {
 			</section>
 			<main
 				className={css`
+					/* fiddle */
+					margin-top: calc(-2.2rem + var(--distance));
+
 					display: flex;
 					flex-wrap: wrap;
 					gap: var(--distance);
@@ -52,7 +66,11 @@ const Home: React.FC = () => {
 						aspectRatio: "1",
 					}}
 				/>
-				<article style={{ marginTop: "-0.4rem" }}>
+				<article
+					style={{
+						// fiddle
+						marginTop: "-0.4rem",
+					}}>
 					<section
 						className={cx(
 							section,