/* Hero slider: featured images often carry their own headline on the left, so the slide title sits on a
   near-solid dark band there and the image shows through on the right. */
.blog-hero-slide { background: #0b0b0b; }
.blog-hero-slide img { object-position: right center; }
.blog-hero-slide::after {
	background: linear-gradient(90deg, #0b0b0b 0%, #0b0b0b 50%, rgba(11, 11, 11, .6) 70%, rgba(11, 11, 11, .05) 100%);
}
.blog-hero-content {
	top: 0; bottom: 0; left: 56px;
	max-width: min(44%, 520px);
	justify-content: center;
}
.blog-hero-content h2 {
	font-size: clamp(22px, 2.4vw, 34px);
	font-weight: 600;
	line-height: 1.25;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 768px) {
	.blog-hero-slide::after {
		background: linear-gradient(to top, #0b0b0b 0%, rgba(11, 11, 11, .95) 55%, rgba(11, 11, 11, .9) 100%);
	}
	.blog-hero-content { top: auto; bottom: 36px; left: 20px; right: 20px; max-width: none; justify-content: flex-end; }
	.blog-hero-content h2 { font-size: 20px; -webkit-line-clamp: 3; }
}