Hero image with image, heading and content margin

[chrimesdev]

When using the Hero with image, heading, and content there is no bottom responsive margin below the Hero component, so any content placed within the page after this component is hidden behind the blue content section of the header.

Example (with h2 element hidden behind the hero image)

Example (with different content length and promo group component)

On the NHS.UK homepage, a responsive top margin is added to the content section to fix this. However, our spacing should always be in a single downwards direction and the spacing should be applied to the hero component instead. The margins might change depending on how much content you have in the blue section.

I've also tried adding padding to the section below the hero component

[theonlymojo]

I've referenced this issue in the NHS.UK JIRA board to gauge interest in it being picked up (CITR-574). If someone picks this up, please mention here to avoid any duplicated effort.