Card actions should vertically align when used in rows.

[damienwebdev]

Feature description

I would like cards set in a grid to have actions that are vertically aligned.

Use case

As a developer, I am writing a grid of cards like:

<div class="gc-cases">
	@for (study of caseStudies; track study.slug) {
	<daff-card class="gc-case">
		<div daffCardTagline class="gc-case__eyebrow">{{ study.eyebrow }}</div>
		<div daffCardTitle class="gc-case__title">{{ study.title }}</div>
		<div daffCardContent class="gc-case__content">
			<p class="gc-case__blurb">{{ study.blurb }}</p>
		</div>
		<div daffCardActions class="gc-case__actions">
			<a daff-button size="sm" color="primary" [routerLink]="['/case-studies', study.slug]">Read
				more</a>
		</div>
	</daff-card>
</div>

Which looks visually like:

Currently, I have to do:

// daff-card's wrapper isn't a flex column, so the actions slot sits directly
	// under the content instead of at the card's bottom. Make the wrapper a
	// column and let the body grow, so the "Read more" buttons line up across
	// cards of differing content heights (the grid already equalizes height).
	::ng-deep .daff-card__wrapper {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	::ng-deep .daff-card__body {
		flex: 1;
	}

To make it look like:

Prior work

No response

Daffodil version

0.93.0

Additional context

I think this style would be enough:

.daff-card__wrapper {
  position: relative;
  height: 100%;
  display: flex;            // add
  flex-direction: column;   // add
}

.daff-card__actions {
  padding: 0 1.5rem 1.5rem;
  position: relative;
  z-index: 2;
  margin-top: auto;         // add: sink to the bottom when the card has spare height
}