/* "On this day"-kaartje. Positie, achtergrond en afgeronde hoeken komen van #qt in heisa.css
   (position: fixed; bottom: 10px; + links/rechts via inline style), zodat het kaartje
   er hetzelfde uitziet als de quote en bij hover donkerder wordt. */

/* Maten: landscape 210x139, bij hover 320x213. Portrait = dezelfde verhouding gedraaid. */
#qt.otd {
	--otd-w: 210px;  --otd-h: 139px;
	--otd-hw: 320px; --otd-hh: 213px;
	width: auto;
	max-width: none;
	padding: 8px;
}

#qt.otd.otd_portrait {
	--otd-w: 139px;  --otd-h: 210px;
	--otd-hw: 213px; --otd-hh: 320px;
}

.otd_card {
	display: block;
	width: var(--otd-w);
	color: #fff;
	text-decoration: none;
	transition: width .25s ease;
}

.otd_card img {
	display: block;
	width: 100%;
	height: var(--otd-h);
	object-fit: cover;
	object-position: center;
	border-radius: 10px;
	transition: height .25s ease;
}

.otd_kicker {
	margin: 8px 0 0;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .75;
}

.otd_caption {
	margin: 2px 0 2px;
	font-size: 12px;
	line-height: 1.3;
}

/* Hover op heel het blok (#qt), enkel met een muis. */
@media (hover: hover) {
	#qt.otd:hover .otd_card {
		width: var(--otd-hw);
	}
	#qt.otd:hover .otd_card img {
		height: var(--otd-hh);
	}
}