Backgrounds are img elements not backgrounds, sized with object fit so they can take advantage of srcset if possible. Add an inline style [x/y] of object-position to set the focal point for the image, eg. style="object-position: 70% 20%" for an image with a focal point towards the top right.

Add a class of banner__bg--blurred to the banner__bg to always blur the background - backgrounds will by default be blurred only at small viewport widths.


Consider reducing the h-size of any titles if placing a banner in a column, place this size on the title__highlight.

If you're only using a very small amount of text, you might not need to always blur the banner__bg. Use judgement and test responsively :)