diff --git a/packages/fuselage/src/components/Modal/Modal.stories.tsx b/packages/fuselage/src/components/Modal/Modal.stories.tsx
index 7cb6ff38e3..b3ba808c91 100644
--- a/packages/fuselage/src/components/Modal/Modal.stories.tsx
+++ b/packages/fuselage/src/components/Modal/Modal.stories.tsx
@@ -145,8 +145,8 @@ export const _WithHeroImage = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non
urna posuere, tempor urna nec, lacinia lacus. Vivamus ac lobortis arcu.
Morbi malesuada, diam sed congue aliquet, dui elit tincidunt leo, a
diff --git a/packages/fuselage/src/components/Modal/Modal.styles.scss b/packages/fuselage/src/components/Modal/Modal.styles.scss
index 8370d7a838..f46abe20bb 100644
--- a/packages/fuselage/src/components/Modal/Modal.styles.scss
+++ b/packages/fuselage/src/components/Modal/Modal.styles.scss
@@ -70,11 +70,18 @@ $modal-margin: theme('modal-margin', auto);
}
&__hero-image {
+ display: block;
+
width: 100%;
height: auto;
max-height: lengths.size(256);
- margin-bottom: lengths.size(24);
object-fit: contain;
+
+ &-wrapper {
+ margin: 0;
+ margin-bottom: lengths.size(24);
+ margin-inline: -(lengths.size(24));
+ }
}
&__backdrop {
diff --git a/packages/fuselage/src/components/Modal/ModalHeroImage.tsx b/packages/fuselage/src/components/Modal/ModalHeroImage.tsx
index ebd62a5a6e..073e9f3d1a 100644
--- a/packages/fuselage/src/components/Modal/ModalHeroImage.tsx
+++ b/packages/fuselage/src/components/Modal/ModalHeroImage.tsx
@@ -6,5 +6,7 @@ import Box from '../Box';
export type ModalHeroImageProps = ComponentProps;
export const ModalHeroImage = ({ ...props }: ModalHeroImageProps) => (
-
+
);