/* KUROFUNE LINK: related posts after the post body. Minimal on purpose; themes can override .kurofune-link*. */
.kurofune-link {
	margin: 2em 0 0;
	/* The column count follows the width of the post body, not the screen (sidebars, narrow themes). */
	container-type: inline-size;
	container-name: kurofune-link;
}

.kurofune-link__heading {
	margin: 0 0 0.75em;
	font-weight: 700;
	font-size: 1.1em;
}

.kurofune-link__list {
	display: grid;
	/* Fixed columns so the default 6 cards always fill the last row: 2 x 3 on phones, 3 x 2 when wider. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container kurofune-link (min-width: 540px) {
	.kurofune-link__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kurofune-link__item {
	margin: 0;
	padding: 0;
}

.kurofune-link__card {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.kurofune-link__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	height: auto;
}

.kurofune-link__title {
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.kurofune-link__card:hover .kurofune-link__title,
.kurofune-link__card:focus .kurofune-link__title {
	text-decoration: underline;
}