Fix courses overview layout in IE11

[afercia]

Summary

This PR can be summarized in the following changelog entry:

• Fixes the Courses Overview layout in Internet Explorer 11

Relevant technical choices:

Examples updated:

• changes the layout from CSS grids to flexbox
• fixes an IE11 CSS flexbox bug
• adds a max-width to only allow max 5 Cards per row
• updates some of the examples containers so it's possible to use a full width container for the Courses Cards example

Details: Although the layout change needs to be implemented in wordpress-seo too, the example needs to be updated as well. When switching to flexbox, a new IE11 bug appeared.

In IE 11, when flex items in a column direction have an height that is computed based on a scaled image. the item height is calculated on the height of the image before it gets scaled by the browser. See https://github.com/philipwalton/flexbugs#flexbug-5 Bug demo: https://codepen.io/philipwalton/full/LEbQON

Screenshot of the bug:

The blank space is given by the space the image would take before it gets scaled. Adding overflow: hidden to the image container fixes the bug.

Test instructions

To test the standalone app in IE11:

• yarn link the YoastSEO.js branch 2086-yoastseo-1440-breaks-yoast-components-in-ie11
• run yarn && yarn start and go to localhost:3333
• go in the Components tab
• check the Cards layout is rendered correctly
• the Cards in a row must have the same height
• each row must have max 5 Cards (if testing on a small screen, zoom out and verify there are max 5 Cards in a row)
• click the button at the top of the page to change language direction and
  • verify the Cards margins are OK
  • verify the green checkmarks are on the right
• check there are no visual regressions in other browsers

Fixes https://github.com/Yoast/wordpress-seo/issues/11953

[Dieterrr]

CR done 👍

[IreneStr]

Acceptance 👍