All solutions

I used grid display.

There is a weird issue in mobile view where the content extends outside the scrollable area of the viewport/window. I'm not sure what's causing it aside from misunderstanding padding/margin. (fixed)

I'm unable to add padding to the buttons without distorting the radius, cause the 'pill' to have flat edges on left/right. (fixed)

I'm not sure how to do the following... get an even split between the info pane and the hero image fill the hero pane with the image and apply the purple overlay. (overlay fixed)

I'm not going to attempt mobile until i fix the desktop version. (sw5apped to mobile first already)

I would like to know if there is a better way to center text aside from text-align? How is my first attempt at using BEM naming convention?