.grave-controle-media-card {
	position: relative;
	display: grid;
	align-content: end;
	aspect-ratio: 1;
	height: 100%;
	overflow: clip;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface-sunken);
}

.grave-controle-media-card,
.grave-controle-media-card__panel {
	padding: var(--wp--preset--spacing--25);
}

.wp-block-group.grave-controle-media-card > *,
.wp-block-group.grave-controle-media-card__text > * {
	margin: 0;
}

.grave-controle-media-card > .wp-block-post-featured-image,
.grave-controle-media-card > .wp-block-image {
	position: absolute;
	inset: 0;
}

.grave-controle-media-card > .wp-block-post-featured-image img,
.grave-controle-media-card > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The card's text sits on the panel below the photo, not on it, so the scrim stays lighter than
   the one a Cover carries. */
.grave-controle-media-card > .wp-block-post-featured-image::after,
.grave-controle-media-card > .wp-block-image::after {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--overlay);
	opacity: 0.25;
	content: "";
}

/* Painted above the photo as a grid item, never with `position`: a positioned panel would
   become the containing block of the title link's ::after and shrink the hit area to itself. */
.grave-controle-media-card__panel {
	z-index: 1;
	gap: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface);
}

.grave-controle-media-card__text {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

/* The card is a fixed square: a long title or excerpt would push the panel over the photo. */
.grave-controle-media-card :is(.wp-block-post-title, .wp-block-heading),
.grave-controle-media-card .wp-block-post-excerpt__excerpt,
.grave-controle-media-card__text > p {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

@media (prefers-reduced-motion: no-preference) {
	.grave-controle-media-card > .wp-block-post-featured-image img,
	.grave-controle-media-card > .wp-block-image img {
		transition: transform var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--easing--out);
	}

	.grave-controle-media-card:focus-within > .wp-block-post-featured-image img,
	.grave-controle-media-card:focus-within > .wp-block-image img {
		transform: scale(1.04);
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.grave-controle-media-card:hover > .wp-block-post-featured-image img,
	.grave-controle-media-card:hover > .wp-block-image img {
		transform: scale(1.04);
	}
}