/* framework/posts-row — the VIKAND post card.
   Measured off live: cards 264 wide with 48px gaps inside a 1200 container,
   image 250x141, one-line clipped title, small uppercase date. */
.vk-recent__grid {
	display: grid;
	/* minmax(0,…), or the card images set a min-content floor and the columns
	   blow out past the container. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* 27, measured. At 48 the cards came out 227 wide against live's 241 and
	   every thumbnail with them — 213 by 120 where live draws 229 by 129, on
	   ten cards in the press room and under every article. The row pitch is
	   the same either way, so nothing else moved and it read as a picture
	   size rather than a gap. */
	column-gap: 34px;
	row-gap: 48px;
}
.vk-recent__card {
	display: block;
	background: #fff;
	/* Live draws the card: a 2px #e5e5e5 rule around the picture, the title and
	   the date. Without it the press room and the in-the-news row read as loose
	   images floating on white. */
	border: 2px solid #e5e5e5;
	padding: 5px 5px 0;
	text-decoration: none;
	/* The card link itself carries live's body colour and justified alignment;
	   the title and date override both. Inheriting the page's text colour made
	   the card a different colour from live's on every listing. */
	color: #999;
	text-align: justify;
}
.vk-recent__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 250 / 141;
	overflow: hidden;
	background: #88a6c3;
}
.vk-recent__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 7, not 5: with the card's own 5px that is live's 12px inset, which makes the
   title 219 wide in a 243 card. At 5 it was 223, on the press room and under
   every article. */
.vk-recent__body { display: block; padding: 10px 7px; }
/* An h3, as live has it — headings inside the card link, so the listing has a
   real outline rather than a wall of anonymous spans. */
.vk-recent__card-title {
	display: block;
	margin-top: 0;
	/* Live's listing section justifies its text; single-line titles look the
	   same either way, but matching it keeps the comparison honest. */
	text-align: justify;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3.4px;
	line-height: 20.4px;
	color: #272727;
	margin: -1px 0 5px;
	/* Live clips the card title to one line. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.vk-recent__card-date {
	display: block;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: normal;
	line-height: 1;
	color: rgba(0, 0, 0, 0.65);
}

@media (max-width: 979px) {
	.vk-recent__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px; }
}
@media (max-width: 599px) {
	/* minmax(0, …) here too: a bare 1fr takes the card's min-content, and the
	   one-line clipped title made that 1316px on a 390px phone. */
	.vk-recent__grid { grid-template-columns: minmax(0, 1fr) !important; }
}