3 files changed, 8 insertions, 6 deletions
diff --git a/src/components/molecules/layout/card.fixture.tsx b/src/components/molecules/layout/card.fixture.ts
index f96cc43..01fe2e9 100644
--- a/src/components/molecules/layout/card.fixture.tsx
+++ b/src/components/molecules/layout/card.fixture.ts
@@ -1,7 +1,7 @@
 export const cover = {
   alt: 'A picture',
   height: 480,
-  src: 'http://placeimg.com/640/480',
+  src: 'https://picsum.photos/640/480',
   width: 640,
 };
 
diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
index 31f6a4b..7a06508 100644
--- a/src/components/molecules/layout/card.module.scss
+++ b/src/components/molecules/layout/card.module.scss
@@ -20,6 +20,7 @@
   .cover {
     place-content: center;
     height: fun.convert-px(150);
+    object-fit: scale-down;
     margin: auto;
     border-bottom: fun.convert-px(1) solid var(--color-border);
   }
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index c9e7a90..c316100 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -1,7 +1,6 @@
+import NextImage, { type ImageProps as NextImageProps } from 'next/image';
 import type { FC } from 'react';
-import type { Image as Img } from '../../../types';
-import { ButtonLink, Heading, type HeadingLevel } from '../../atoms';
-import { ResponsiveImage } from '../images';
+import { ButtonLink, Figure, Heading, type HeadingLevel } from '../../atoms';
 import styles from './card.module.scss';
 import { Meta, type MetaData } from './meta';
 
@@ -13,7 +12,7 @@ export type CardProps = {
   /**
    * The card cover.
    */
-  cover?: Img;
+  cover?: Pick<NextImageProps, 'alt' | 'src' | 'title' | 'width' | 'height'>;
   /**
    * The card id.
    */
@@ -63,7 +62,9 @@ export const Card: FC<CardProps> = ({
       <article className={styles.article}>
         <header className={styles.header}>
           {cover ? (
-            <ResponsiveImage {...cover} className={styles.cover} />
+            <Figure>
+              <NextImage {...cover} className={styles.cover} />
+            </Figure>
           ) : null}
           <Heading className={styles.title} id={headingId} level={titleLevel}>
             {title}