From 97f4ad9b53799034583cb59ca0cdb5ec7cca65de Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Wed, 20 Nov 2024 11:06:45 +0100
Subject: [PATCH 1/2] Remove prop

---
 app/scripts/components/common/card/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
index 74e705cd1..74fc4b86b 100644
--- a/app/scripts/components/common/card/index.tsx
+++ b/app/scripts/components/common/card/index.tsx
@@ -188,7 +188,6 @@ const CardLabel = styled.span`
 const CardFigure = styled(Figure)`
   order: -1;
   background: ${themeVal('color.primary-100')};
-  min-height: ${variableGlsp(12)};
 
   img {
     height: 100%;

From 4f9c6799a0a99f9be28929e6098abaff831dc9ad Mon Sep 17 00:00:00 2001
From: Gjore Milevski <dzole0311@gmail.com>
Date: Wed, 20 Nov 2024 17:48:27 +0100
Subject: [PATCH 2/2] Update styles and mocks

---
 app/scripts/components/common/card/index.tsx  | 39 +++++++++++++------
 .../stories/external-link-example.stories.mdx |  6 ---
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
index 74fc4b86b..669340b68 100644
--- a/app/scripts/components/common/card/index.tsx
+++ b/app/scripts/components/common/card/index.tsx
@@ -187,14 +187,17 @@ const CardLabel = styled.span`
 
 const CardFigure = styled(Figure)`
   order: -1;
-  background: ${themeVal('color.primary-100')};
+  width: 100%;
+  ${(props) => !props.isCoverOrFeatured && `aspect-ratio: 2/1;`}
+  background: ${(props) =>
+    props.src ? 'none' : props.theme.color['primary-100']};
 
   img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     mix-blend-mode: multiply;
-    display: ${(props) => (props.src ? 'inline-block' : 'none')};
+    display: ${(props) => (props.src ? 'block' : 'none')};
   }
 `;
 
@@ -287,7 +290,7 @@ function CardComponent(props: CardComponentPropsType) {
     footerContent,
     hideExternalLinkBadge,
     onCardClickCapture,
-    onClick,
+    onClick
   } = props;
   // @TODO: This process is not necessary once all the instances adapt the linkProperties syntax
   // Consolidate them to use LinkProperties only
@@ -299,18 +302,29 @@ function CardComponent(props: CardComponentPropsType) {
     linkProperties = linkPropertiesProps;
   } else {
     const { linkTo } = props;
-    linkProperties = linkTo ? {
-      linkTo,
-      pathAttributeKeyName: 'to',
-      LinkElement: SmartLink
-    } : undefined;
+    linkProperties = linkTo
+      ? {
+          linkTo,
+          pathAttributeKeyName: 'to',
+          LinkElement: SmartLink
+        }
+      : undefined;
   }
 
-  const isExternalLink = linkProperties ? /^https?:\/\//.test(linkProperties.linkTo) : false;
+  const isExternalLink = linkProperties
+    ? /^https?:\/\//.test(linkProperties.linkTo)
+    : false;
 
   return (
     <ElementInteractive
-      {...(linkProperties ? {linkProps: {as: linkProperties.LinkElement, [linkProperties.pathAttributeKeyName]: linkProperties.linkTo}} : {})}
+      {...(linkProperties
+        ? {
+            linkProps: {
+              as: linkProperties.LinkElement,
+              [linkProperties.pathAttributeKeyName]: linkProperties.linkTo
+            }
+          }
+        : {})}
       as={CardItem}
       cardType={cardType}
       className={className}
@@ -358,7 +372,10 @@ function CardComponent(props: CardComponentPropsType) {
             </CardBody>
           )}
           {footerContent && <CardFooter>{footerContent}</CardFooter>}
-          <CardFigure src={imgSrc}>
+          <CardFigure
+            src={imgSrc}
+            isCoverOrFeatured={cardType === 'cover' || cardType === 'featured'}
+          >
             <img src={imgSrc} alt={imgAlt} loading='lazy' />
           </CardFigure>
         </>
diff --git a/mock/stories/external-link-example.stories.mdx b/mock/stories/external-link-example.stories.mdx
index c6225d964..99b20409f 100644
--- a/mock/stories/external-link-example.stories.mdx
+++ b/mock/stories/external-link-example.stories.mdx
@@ -3,12 +3,6 @@ featured: true
 id: 'external-link-test'
 name: External Link Test
 description: Story to test external link
-media:
-  src: ::file ./img-placeholder-6.jpg
-  alt: Generic placeholder by Unsplash
-  author:
-    name: Unsplash
-    url: https://unsplash.com/
 pubDate: 2023-02-09
 hideExternalLinkBadge: false
 taxonomy: