.dimu-book {
	--dimu-book-max-width: none;
	--dimu-book-min-height: 0px;
	--dimu-book-min-height-m: var(--dimu-book-min-height);
	--dimu-book-pad-top: 60px;
	--dimu-book-pad-right: 60px;
	--dimu-book-pad-bottom: 60px;
	--dimu-book-pad-left: 60px;
	--dimu-book-pad-top-m: var(--dimu-book-pad-top);
	--dimu-book-pad-right-m: var(--dimu-book-pad-right);
	--dimu-book-pad-bottom-m: var(--dimu-book-pad-bottom);
	--dimu-book-pad-left-m: var(--dimu-book-pad-left);
	--dimu-book-radius: 0px;
	--dimu-book-radius-hover: var(--dimu-book-radius);
	--dimu-book-align: flex-start;
	--dimu-book-text-align: left;
	--dimu-book-gap: 12px;

	--dimu-book-bg: transparent;
	--dimu-book-bg-hover: var(--dimu-book-bg);

	--dimu-book-image-height: 320px;
	--dimu-book-image-min: 0px;
	--dimu-book-image-gap: 40px;

	--dimu-book-tracking: 0px;
	--dimu-book-transform: none;

	--dimu-book-eyebrow-size: 14px;
	--dimu-book-eyebrow-color: #666;
	--dimu-book-eyebrow-weight: 400;
	--dimu-book-eyebrow-lh: 1.4;

	--dimu-book-title-size: 28px;
	--dimu-book-title-color: #000;
	--dimu-book-title-hover: var(--dimu-book-title-color);
	--dimu-book-title-weight: 600;
	--dimu-book-title-lh: 1.2;

	--dimu-book-text-size: 16px;
	--dimu-book-text-color: #333;
	--dimu-book-text-weight: 400;
	--dimu-book-text-lh: 1.6;

	display: flex;
	flex-direction: column;
	/* An auto cross axis margin stops a flex item from stretching, so the width has to
	   be claimed explicitly. The margins then only bite once max-width is reached. */
	width: 100%;
	max-width: var(--dimu-book-max-width);
	min-height: var(--dimu-book-min-height);
	margin-inline: auto;
	padding:
		var(--dimu-book-pad-top)
		var(--dimu-book-pad-right)
		var(--dimu-book-pad-bottom)
		var(--dimu-book-pad-left);
	border-radius: var(--dimu-book-radius);
	background: var(--dimu-book-bg);
	text-align: var(--dimu-book-text-align);
	text-decoration: none;
	/* Keeps the artwork inside the rounded corners */
	overflow: hidden;
	transition: background-color .25s ease, border-radius .35s ease;
}

.dimu-book:hover,
.dimu-book:focus-visible {
	background: var(--dimu-book-bg-hover);
	border-radius: var(--dimu-book-radius-hover);
	text-decoration: none;
}

.dimu-book:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

/* The artwork keeps its natural height. Letting it flex to fill the card collapsed it
   to nothing whenever the card had no height of its own to divide up. */
.dimu-book__media {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	/* Reserves the box before the file arrives, so cards with different artwork line up
	   and nothing shifts once it loads */
	min-height: var(--dimu-book-image-min);
	margin-bottom: var(--dimu-book-image-gap);
}

.dimu-book__media img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: var(--dimu-book-image-height);
	height: auto;
	object-fit: contain;
}

.dimu-book__body {
	/* Pushed to the bottom only when the card is taller than its content */
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: var(--dimu-book-align);
	gap: var(--dimu-book-gap);
}

.dimu-book__eyebrow,
.dimu-book__title,
.dimu-book__text {
	margin: 0;
	letter-spacing: var(--dimu-book-tracking);
	text-transform: var(--dimu-book-transform);
}

.dimu-book__eyebrow {
	font-size: var(--dimu-book-eyebrow-size);
	font-weight: var(--dimu-book-eyebrow-weight);
	line-height: var(--dimu-book-eyebrow-lh);
	color: var(--dimu-book-eyebrow-color);
}

/* The dash belongs to the presentation, not to the text the author types */
.dimu-book__eyebrow--dashed::before {
	content: '—';
	margin-right: .5em;
}

.dimu-book__title {
	font-size: var(--dimu-book-title-size);
	font-weight: var(--dimu-book-title-weight);
	line-height: var(--dimu-book-title-lh);
	color: var(--dimu-book-title-color);
	transition: color .25s ease;
}

.dimu-book:hover .dimu-book__title,
.dimu-book:focus-visible .dimu-book__title {
	color: var(--dimu-book-title-hover);
}

.dimu-book__text {
	font-size: var(--dimu-book-text-size);
	font-weight: var(--dimu-book-text-weight);
	line-height: var(--dimu-book-text-lh);
	color: var(--dimu-book-text-color);
}

@media (max-width: 600px) {
	.dimu-book {
		min-height: var(--dimu-book-min-height-m);
		padding:
			var(--dimu-book-pad-top-m)
			var(--dimu-book-pad-right-m)
			var(--dimu-book-pad-bottom-m)
			var(--dimu-book-pad-left-m);
	}
}