Story Promo - Fallback spacing for Leading promo

[sareh]

Resolves #3149

Overall change: Leading story promo - ensures there's spacing between image and text blocks when viewing in browsers that don't support CSS Grid (screenshots below are in IE11)

Before Link to live storybook example with Persian text

After Link to local storybook example with Persian text

Code changes:

• Add padding onto Text and Image blocks on the appropriate side to create a 'gutter' between the text and the image. e.g. on a RTL service like persian above, the Text block has a padding-left: 0.5rem; and the Image block has a padding-right: 0.5rem;

• Ensure dir prop is being passed to Image and Text blocks, so the correct padding can be added.

• Remove position: relative from top-level StoryPromoWrapper - this allows the Image and Text blocks to remain within block flow and therefore respect width & padding

Following this change, I checked all three promo types - Top Regular and Leading, with a media video variant, to ensure layout is as expected for each of them. All appear as expected.

---

• I have assigned myself to this PR and the corresponding issues
• Automated jest tests added (for new features) or updated (for existing features)
• This PR requires manual testing

[DenisHdz]

Checked with Browserstack and the new fallback values are applied correctly 👍

[AlistairGempf]

Looks good, based on the Chromatic snapshots and the code.

[PriyaKR]

@sareh i am seeing the text above the image on IE11 across all viewports verifies on browserstack.

[PriyaKR]

LGTM.