Adjust positioning and aspect ratio of blog post banners

[melchoyce]

Feature suggestion

When designing the post layout for the new 18F site, I didn't take the banner guidelines into consideration. We should update the design of the posts to match the updated guidelines being worked on in https://github.com/18F/TLC-crew/issues/164.

Other considerations and design implementation suggestions

I've worked through some designs with @igorkorenfeld, @mitogi, and @cmajel and we've come up with this:

Figma link

Banner images should take up the full width of the grid, with their height scaling proportionally (instead of cropping an image). So an image using the banner guidelines would be around 1136x284, while a set of device screenshots, for example, could take up more height.

The tag positioning has been updated to better balance this new design.

[nateborr]

@neilmb These are the other issues that I think may be closely related to this work for blog images, but not duplicates:

• Accessibility tweaks for blog posts' featured image component #3953
• Add fallback style for legacy figure captions in the hero #3977
• Show banners on /blog #4035
• BUG: Older blog post images sometimes have overlaid captions #4074

[neilmb]

The current markup in _includes/feature-image.html: is not ideal for this. There are other problems with the empty-figure-background-is-the-real-image markup in #3953 and #3977.

The current "Image in the background of a figure with a fixed height" gives a cool scrolling effect where it chops off the edges, but it isn't obvious how to get the right height in https://github.com/18F/18f.gsa.gov/blob/main/assets/common/styles/pages/blog.scss#L55 since that figure element with that class is actually completely empty.