/**
*  Ähnliche Artikel (kompakte Liste)
*
*  Meta --paper-muted auf --paper-white/--bg-main: ≥ 4,5 : 1.
**/

.c-related__title {
	margin: 0 0 var(--space-xs);
	color: var(--cool-1);
	font-family: var(--font-editorial);
	font-size: var(--fs-1);
	font-weight: 700;
	letter-spacing: 0;
}

.c-related__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-related__item {
	margin: 0;
	padding: var(--space-xs) 0;
	border-block-end: 1px solid var(--paper-line);

	&:first-child {
		padding-block-start: 0;
	}
}

.c-related__link {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: var(--space-xs);
	align-items: center;
	color: inherit;
	text-decoration: none;

	&.c-related__link--no-image {
		grid-template-columns: minmax(0, 1fr);
	}

	&:focus-visible {
		outline: 3px solid var(--cool-1);
		outline-offset: 3px;
	}

	&:hover .c-related__name {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

.c-related__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.2rem;
}

.c-related__text {
	display: grid;
	gap: var(--space-3xs);
}

.c-related__name {
	color: var(--cool-1);
	font-family: var(--font-editorial);
	font-size: var(--fs--1);
	font-weight: 700;
	line-height: var(--lh--1);
}

.c-related__meta {
	color: var(--paper-muted);
	font-family: var(--font-interface);
	font-size: var(--fs-meta);
}