Fix horizontal card image aspect ratios

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Changed `attributes` to `formGroupAttributes` and `classes` to `formClasses` on checkboxes and radios - `attributes` and `classes` now get applied to each checkbox and radio element
+- Images on horizontal cards are now at least a 3:2 aspect ratio
 
 ### Fixed
 

src/nationalarchives/components/card/card.scss

@@ -118,6 +118,8 @@
   }
 
   &--horizontal {
+    aspect-ratio: auto 3/1;
+
     position: relative;
 
     @include media.on-larger-than-mobile {
@@ -128,6 +130,7 @@
 
       .tna-card__image-container {
         height: auto;
+        min-height: 50%;
         margin-bottom: 0;
         padding-bottom: 0;
 

src/nationalarchives/components/card/card.stories.js

@@ -1,5 +1,6 @@
 import Card from "./template.njk";
 import macroOptions from "./macro-options.json";
+import { customViewports } from "../../../../.storybook/viewports";
 
 const argTypes = {
   supertitle: { control: "text" },
@@ -288,6 +289,44 @@ HorizontalAccent.args = {
   classes: "tna-card--demo",
 };
 
+export const HorizontalMinimal = Template.bind({});
+HorizontalMinimal.args = {
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "l",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  horizontal: true,
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const HorizontalMobile = Template.bind({});
+HorizontalMobile.parameters = {
+  viewport: {
+    defaultViewport: "small",
+  },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+  },
+};
+HorizontalMobile.args = {
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "l",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  horizontal: true,
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
 export const Sources = Template.bind({});
 Sources.args = {
   supertitle: "Card supertitle",