Fixes 2 bugs:

1. All keydowns were being prevented. Because of that the user wasn't able to navigate in the whole page using ARROW_UP/ARROW_DOWN.

2. Even when  is an input or textarea the keydowns were being prevented. Because of that the user wasn't able to type any text on these elements.

* fix wrong activation of all nested links;
just first level item should be activated

* use template instead of string concatenation

- better copy and examples throughout
- callout on flexbug #12 for inline elements like links and images (which is the problem in #20408)
- add order section

Sets minimum required flex styles (including an explicit starting alignment) and removes everything else.

- no need for .media-left and .media-right, we have padding utils
- no need for a .media-heading, we have margin
- no need for .media-object, we have display utils
- no need for .media-list, we have .list-unstyled util

* Add color variables for white and black

Closes #21395.

- Instead of negative left/right margins, we selectively apply margins to the cards as needed. This way the first and last child never receive a left and right margin (respectively), so we don't need to negative indent those at the .card-deck level.

- Drops the margin-bottom override on the .card because there's no more default margin there.

- Drop the margin-bottom from the .card-deck to match our lack of margins on the card.

This and the previous commit fixes #19883.

Adding 25%, 50%, and 75% to the mix for later use with cards

add flex direction too

use utils instead

this allows us to easily scale card blocks in groups and decks, without repeating it in our css