Design Notes

Replicating a banner header with a curved bottom. This relies on an SVG shaped white object which is placed below the banner image and then moved upwards using a negative margin to overlay the bottom part of the image. Only applied on medium and large.

N.B. I have had to keep the banner content quite high in the banner area in order for the buttons to continue to be operable at smaller screen widths. Vertical align in the 1 col is set to middle.