.card {
	padding-bottom: 1rem;
	color: var(--black);
}

.card--boxed {
	padding: 0 1.5rem 1.5rem 1.5rem;
	background-color: var(--white);
	box-shadow: var(--box-shadow-default);
}

.card .media {
	margin-bottom: 1rem;
}

.card--boxed .media img {
	margin-right: -1.5rem;
	margin-left: -1.5rem;
	max-width: calc(100% + 3rem);
}

.card .title {
	margin: 0;
	font: var(--h5);
}

.card header > .title {
	margin-top: 1rem;
}

.card .title:not(:has(+ p)) {
	margin-bottom: 1rem;
}

.card header {
	margin-bottom: 1rem;
	font: var(--m);
	color: var(--black);
}

.card time + span,
.card span + span {
	margin-left: 0.5rem;
	padding-left: 0.5rem;
	border-left: 1px solid var(--black);
}

.card a {
	font: var(--xl-bold);
}

.card:not(:has(.media)) {
	padding-top: 1.5rem;
	color: var(--black-80);
}

.card:not(:has(.media)) header {
	color: var(--black-60);
}

.card:not(:has(.media)) .title {
	color: var(--color-primary);
}

.card:not(:has(.media)) mark {
	color: inherit;
	background-color: var(--color-primary--light);
}

.card .facts {
	margin-left: 0;
}

.card .facts li {
	padding-left: 1.5rem;;
	list-style: none;
	background-image: url(/assets/icons/fork-knife--primary.svg);
	background-size: 1rem;
	background-repeat: no-repeat;
	background-position: left center;
}