.card {
	display: block;
	background: var(--color-neutral-0);
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: box-shadow var(--motion-standard) var(--motion-ease),
		transform var(--motion-standard) var(--motion-ease);
}

.card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
	opacity: 1;
}

.card__media {
	aspect-ratio: 16 / 9;
	background: var(--color-neutral-100);
	overflow: hidden;
}
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card__body {
	padding: var(--space-4);
}

.card__title {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin-bottom: var(--space-2);
}

.card__meta {
	font-size: var(--fs-meta);
	line-height: var(--lh-meta);
	color: var(--color-text-secondary);
}

.card--soft {
	background: var(--color-mint-50);
	border-color: var(--color-mint-100);
	box-shadow: none;
}