/* Sits in the content column at the end of an article, next to the sources. */
.dk-authornote {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 34px;
	padding: 22px 24px;
	background: var(--dk-green-light);
	border: 1px solid var(--dk-green-border);
	border-radius: var(--dk-radius);
}

.dk-authornote__kicker {
	color: var(--dk-green);
}

.dk-authornote__row {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.dk-authornote__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--dk-green-border);
	line-height: 0;
	flex: 0 0 auto;
}

.dk-authornote__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.dk-authornote__name {
	font-size: 15.5px;
	font-weight: 600;
	color: var(--dk-green-dark);
}

.dk-authornote__functie {
	font-family: var(--dk-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--dk-green-muted-2);
	margin-left: 10px;
}

.dk-authornote__bio,
.dk-authornote__noot {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--dk-green-dark);
	margin: 0;
}

/* The per-article note is the more specific claim, so set it apart. */
.dk-authornote__noot {
	padding-top: 9px;
	border-top: 1px solid var(--dk-green-border);
	color: var(--dk-green-muted);
}

.dk-authornote__link {
	align-self: flex-start;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--dk-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 500px) {
	.dk-authornote__row {
		grid-template-columns: 1fr;
	}
	.dk-authornote__avatar {
		display: none;
	}
}