.dk-featured {
	padding-block: 40px 0;
}

.dk-featured__card {
	display: grid;
	/* Slightly wider media column than the text: a landscape featured image is
	 * shown whole (see below), so extra width means less empty mat around it. */
	grid-template-columns: 1.25fr 1fr;
	background: var(--dk-paper-light);
	border: 1px solid var(--dk-border);
	border-radius: var(--dk-radius);
	overflow: hidden;
}

/* Show the featured image whole. The text column decides the card height, so a
 * landscape photo gets a mat above and below rather than losing its sides. */
.dk-featured__media {
	min-height: 330px;
	background: var(--dk-paper-warm);
}

/* Absolute, so the image never drives the row height: the text column decides
 * how tall the card is, exactly as before. Without this a portrait upload would
 * stretch the card to its own proportions (the old hard crop hid that by
 * forcing every image into one ratio). .dk-media is already position:relative. */
.dk-featured .dk-featured__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.dk-featured__body {
	padding: 40px 44px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
}

.dk-featured__title {
	font-family: var(--dk-font-serif);
	font-size: clamp(28px, 4vw, 38px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--dk-ink);
}

.dk-featured__excerpt {
	font-size: 16px;
	line-height: 1.65;
	color: var(--dk-text-grey);
}

.dk-featured__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--dk-text-muted);
	padding-top: 12px;
	border-top: 1px solid var(--dk-border);
}

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

.dk-featured__author {
	color: var(--dk-text);
	font-weight: 500;
}

.dk-featured__sep {
	color: #c4bca8;
}

@media (max-width: 700px) {
	.dk-featured__card {
		grid-template-columns: 1fr;
	}
	.dk-featured__media {
		min-height: 200px;
		aspect-ratio: 16 / 10;
	}
	.dk-featured__body {
		padding: 26px 22px;
	}
}