From 91015d72de39cf820d94ee44946379adedc6be4f Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Fri, 29 Aug 2025 10:26:10 +0800
Subject: [PATCH] Added flexbox

---
 src/pages/next.astro | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/next.astro b/src/pages/next.astro
index c3b3cf4..367262c 100644
--- a/src/pages/next.astro
+++ b/src/pages/next.astro
@@ -5,7 +5,9 @@ import Image from '../../fwt/components/Image/Image'
 import Page from '../../fwt/components/Page/Page'
 import sample1 from '../../fwt/images/sample.avif'
 import sample2 from '../../fwt/images/sample.webp'
-import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage.tsx'
+import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage'
+import Row from '../../fwt/components/Row/Row'
+import Column from '../../fwt/components/Column/Column'
 ---
 
 <Layout title="Home">
@@ -14,11 +16,13 @@ import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage.tsx'
     <Button edges="rounded" label="Back to Home" to="/" />
 
     <section class="image">
-      <!-- <OptimizeImage src="sample.png" size={400} /> -->
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
-      <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+      <!-- <OptimizeImage src="batman.png" size={400} /> -->
+      <Row content="center" gap={1}>
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+        <Image avif={sample1.src} webp={sample2.src} alt="Example Image" size={400} />
+      </Row>
     </section>
   </Page>
 </Layout>
@@ -34,8 +38,8 @@ import OptimizeImage from '../../fwt/components/Optimizer/OptimizeImage.tsx'
     height: auto
 
   .image
-    margin: 2rem 0 0 0
+    margin: 4rem 0 0 0
     border-radius: 4px
-    max-width: 100%
+    width: 100%
     height: auto
 </style>