remove style-based aspect-ratio

Author: joshfarrant

packages/react/src/Card/Card.features.stories.tsx

@@ -48,7 +48,7 @@ export const FullWidth: StoryFn<typeof Card> = () => {
   return (
     <Card href="https://github.com" fullWidth hasBorder>
       <Card.Image
-        style={{aspectRatio: '16 / 10'}}
+        aspectRatio="16:10"
         src={placeholderImage}
         alt="placeholder, blank area with an gray background color"
       />

packages/react/src/Image/Image.features.stories.tsx

@@ -3,15 +3,15 @@ import {Meta, StoryFn} from '@storybook/react'
 
 import placeholderImage from '../fixtures/images/placeholder-600x400.png'
 
-import {Image, ImageBorderRadiusOptions} from './Image'
+import {Image, type ImageAspectRatio, ImageBorderRadiusOptions} from './Image'
 import {Stack} from '../Stack'
 
 export default {
   title: 'Components/Image/Features',
   component: Image,
 } as Meta<typeof Image>
 
-const demoAspectRatios = ['16 / 9', '16 / 10', '4 / 3', '1 / 1']
+const demoAspectRatios: ImageAspectRatio[] = ['16:9', '16:10', '4:3', '1:1']
 
 export const AspectRatio: StoryFn<typeof Image> = () => (
   <Stack direction="horizontal" alignItems="flex-start">
@@ -21,7 +21,7 @@ export const AspectRatio: StoryFn<typeof Image> = () => (
         src={placeholderImage}
         alt="placeholder, blank area with an off-white background color"
         width={200}
-        style={{aspectRatio}}
+        aspectRatio={aspectRatio}
       />
     ))}
   </Stack>

packages/react/src/recipes/seo/Category/CategoryPage.tsx

@@ -241,7 +241,7 @@ export function CategoryPage({accentColor, variant, gridOverlay = false, colorMo
                           <Card.Image
                             src={cardImagePlaceholders[index]}
                             alt="placeholder, blank area with an gray background color"
-                            style={{aspectRatio: '16 / 9'}}
+                            aspectRatio="16:9"
                           />
                           <Card.Heading>Article page heading</Card.Heading>
                           <Card.Description>