Full-width images regardless of alignment when up to 768px

[benlk]

Originally opened by @seanchayes in #1630 for #1611. Opening from within INN/Largo so that I can push a bunch of work from on top of his base.

Changes

• Sets the width of aligned (left, right, center, none) images and blocks and other classes to 100% with max-width 100% and float:none below 767px viewport width.
• Makes sure that the caption of image blocks doesn't mess itself up, through the application of display: table on the captioned figure. The non-caption width changes here were causing the caption to appear in the form of a few-word-wide column below and to the left of the image, rather than being the full width of it.
• Applies Largo's caption styles to image blocks, for consistency.

"Before" screenshots:

"After" screenshots:

[benlk]

To-do list:

• Figure out what viewport width makes sense for these images to lose the floats and max-width, and become width: 100%; on a given post template.
• Test on all viewport sizes on all browsers, for both posts and pages, for the following templates:
  • single-column
  • two-column
  • series landing page description/post-content
  • "full width" template

[benlk]

This doesn't work in the Classic Editor for images, because the max-width is set on the parent div using an inline style.

The image width doesn't expand because it's not the target of the styles introduced in this PR.