Update Featured Content Module styling

[Scotchester]

This PR implements several desired styling updates for Featured Content Modules. See https://GHE/CFGOV/platform/issues/3087 for background.

/cc @designlanguage @keelerr

Removals

• Remove category headers from FCM templates

Changes

• Change FCM min height from 320px to 220px
• Set FCM image width to 270px, let text flex
• Change FCM breakpoint to 600px
• Add bottom padding to FCM image on XS screens
• Sets border on the FCM itself, instead of surrounding block
  • The border is inherent to the FCM styling and shouldn't be set on the block. It makes even less sense now that the block modifier for adding the negative side margins is no longer used.
• Updates docs

Testing

1. Check out a working branch
2. Run gulp docs
3. Go into the documentation directory with cd docs
4. Run bundle exec jekyll serve and visit http://localhost:4000/components/cf-layout/#featured-content-module
5. Go into responsive mode and view the FCM at various window widths

Screenshots

Before

After

Todos

• [ ] Open corresponding PR in cfgov-refresh

Checklist

• [x] PR has an informative and human-readable title
• [x] PR has been tagged with the type of change it includes (breaking, enhancement, bug, documentation or internal)
• [x] Changes are limited to a single goal (no scope creep)
• [x] Code can be automatically merged (no conflicts)
• [x] Code follows the standards laid out in the development playbook
• [x] Passes all existing automated tests
• [x] Any change in functionality is tested
• [x] New functions are documented (with a description, list of inputs, and expected output)
• [x] Placeholder code is flagged / future todos are captured in comments
• [x] Visually tested in supported browsers and devices (see checklist below :point_down:)
• [x] Project documentation has been updated in this PR with the gulp docs command
• [x] Reviewers requested with the Reviewers tool :arrow_right:

Testing checklist

Browsers

• [x] Chrome
• [x] Firefox
• [x] Safari
• [x] Internet Explorer 8, 9, 10, and 11
• [x] Edge
• [x] iOS Safari
• [x] Chrome for Android

Accessibility

• [x] Keyboard friendly
• [x] Screen reader friendly

Other

• [x] Is useable without CSS
• [x] Is useable without JS
• [x] Flexible from small to large screens
• [x] No linting errors or warnings
• [x] JavaScript tests are passing

[Scotchester]

@anselmbradford Thanks for the review! I believe I have addressed all your feedback. Ready for re-review.

P.S.: I still want to do a little more cross-browser testing. I see an issue in IE9 already 😩

[Scotchester]

I think this is good to go. Fixed the IE9 bug by adding an explicit top: 0; to the visual's absolute positioning. @anselmbradford, any final comments?