Center wordmarks on mobile (fixes #10666)

[maureenlholland]

Description

Center wordmarks for Contentful homepage hero components. A stop-gap fix until we resolve the underlying Protocol issue: mozilla/protocol#718

The Hero component has mobile centering for logos only. We added the wordmark for Contentful Hero but since the Protocol component is deprecated, we won't be updating Hero in Protocol. It's a Mozilla only fix because we should not be using the Contentful Hero component on new pages.

Issue / Bugzilla link

#10666

Testing

http://localhost:8000/en-US/

At mobile view size, Hero wordmarks in the Featured Mozilla Products section should be centered.
Above that view size, the wordmarks should be left-aligned or right-aligned (depending on dir attribute)

[codecov]

Codecov Report

Merging #10874 (970da65) into master (710e75f) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #10874   +/-   ##
=======================================
  Coverage   74.37%   74.37%           
=======================================
  Files         139      139           
  Lines        7079     7079           
=======================================
  Hits         5265     5265           
  Misses       1814     1814           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 710e75f...970da65. Read the comment docs.

[alexgibson]

Big improvement on mobile 💯 r+