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

this assumes no margin on the .card to start (which will follow in a later commit)

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

- Drops the absolute positioning of the icons within the left/right controls. We have to keep the controls themselves positioned though since we're overlapping HTML elements here.

- No more position, left, right, or margins involved; just some justify-content and align-items.

- Add some comments for explaining which flex property-value pair does what.

- Remove the unapplied font and line-height stuff now that we're all SVGs and flexbox here.

This revamps the indicators to use flexbox instead of inline-block for added flexbility (hah). Indicators now automatically scale based on the number of elements present, and max out at the `$carousel-indicator-width` instead of always being that wide.