From 59f8ea214eeec19bf416901c382a3bd86f9562a9 Mon Sep 17 00:00:00 2001
From: gmolki <gerardmo98@gmail.com>
Date: Wed, 11 Dec 2024 16:51:12 +0100
Subject: [PATCH] fix: higlighted and full article card images aspect ratio

---
 .../Blog/BlogArticleCard/FeatureImage/cmp.tsx          | 10 ++++++++--
 src/components/Blog/BlogArticleCard/cmp.tsx            |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Blog/BlogArticleCard/FeatureImage/cmp.tsx b/src/components/Blog/BlogArticleCard/FeatureImage/cmp.tsx
index 4cdf83c..0b84a8d 100644
--- a/src/components/Blog/BlogArticleCard/FeatureImage/cmp.tsx
+++ b/src/components/Blog/BlogArticleCard/FeatureImage/cmp.tsx
@@ -10,8 +10,14 @@ export const FeatureImage = ({
 }) => {
   return (
     <LoadingBlinkBox loading={loading} loadingHeight="100%" loadingWidth="100%">
-      <div tw="relative w-full h-full flex justify-center">
-        <Image src={src} alt="Feature Image" fill />
+      <div tw="relative w-auto h-full flex items-center justify-center">
+        <Image
+          src={src}
+          alt="Feature Image"
+          height={0}
+          width={0}
+          tw="relative! w-auto h-auto max-w-full max-h-full"
+        />
       </div>
     </LoadingBlinkBox>
   );
diff --git a/src/components/Blog/BlogArticleCard/cmp.tsx b/src/components/Blog/BlogArticleCard/cmp.tsx
index 6f04f17..5e08884 100644
--- a/src/components/Blog/BlogArticleCard/cmp.tsx
+++ b/src/components/Blog/BlogArticleCard/cmp.tsx
@@ -39,7 +39,7 @@ export const BlogArticleCard = ({
                   <Headline size={size} loading={loading}>
                     {headline}
                   </Headline>
-                  <div tw="lg:hidden w-full h-96 mb-12">
+                  <div tw="lg:hidden w-full mb-8 mt-4">
                     <FeatureImage src={featureImage} loading={loading} />
                   </div>
                   <Description size={size} loading={loading}>
@@ -76,7 +76,7 @@ export const BlogArticleCard = ({
                   {headline}
                 </Headline>
               </div>
-              <div tw="lg:hidden w-full h-96 mb-12">
+              <div tw="lg:hidden w-full mb-8 mt-4">
                 <FeatureImage src={featureImage} loading={loading} />
               </div>
               <div tw="flex flex-col justify-between gap-6">