From 74877508ac3e67d947d78f42a937a8e65f29cffd Mon Sep 17 00:00:00 2001
From: gustavocodigo <gilapesgus@gmail.com>
Date: Tue, 8 Aug 2023 18:02:45 -0300
Subject: [PATCH] fixed: responsivity

---
 src/components/Article.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Article.tsx b/src/components/Article.tsx
index cc6b806..5391a48 100644
--- a/src/components/Article.tsx
+++ b/src/components/Article.tsx
@@ -8,15 +8,21 @@ interface ArticleProps {
   textFirst?: boolean
 }
 
-export const Article = ({imageData, alt="", title, content, textFirst=false}: ArticleProps) => {
+export const Article = ({ imageData, alt = "", title, content, textFirst = false }: ArticleProps) => {
   return (
-    <article data-text-first={textFirst} className="flex gap-32 data-[text-first=true]:flex-row-reverse flex-wrap">
-      <Image src={imageData} alt={alt} width={250} height={250}/>
 
-      <div>
-        <h2 className="text-4xl mb-7">{title}</h2>
-        <p className="text-3xl">{content}</p>
-      </div>
-    </article>
+    <div className='lg:min-h-[40vh] max-h-[700px] flex justify-center items-center max-w-full'>
+      <article
+        data-text-first={textFirst}
+        className={`max-w-full flex  w-full m-auto max-w-full flex-wrap md:flex-nowrap justify-between md:gap-16 data-[text-first=true]:flex-row-reverse`}
+      >
+        <Image className="max-w-full w-200 md:w-50" src={imageData} alt={alt} width={200} height={200} />
+        <div className="w-full mt-12 max-w-full">
+          <h2 className="">{title}</h2>
+          <p className="max-w-full">{content}</p>
+        </div>
+      </article>
+    </div>
+
   )
 }