/* framework/posts-archive — measured off live /archives/.
   A grid, not CSS multicol: live lays the archive out row by row, two cards
   side by side at the same y. Multicol fills the first column top to bottom,
   so the second post landed under the first instead of beside it and every
   card after it was in the wrong place. */
.vk-archive {
	display: grid;
	grid-template-columns: repeat(var(--vk-archive-cols, 2), minmax(0, 1fr));
	column-gap: 35px;
	align-items: start;
	/* Live opens the listing 31px below the header; the block carries it so the
	   template stays thin. */
	padding-top: 31px;
}
.vk-archive__col { min-width: 0; }
.vk-archive__card {
	box-sizing: border-box;
	break-inside: avoid;
	padding: 18px;
	/* 43, not 26: live leaves 122px between the bottom of one card's link and
	   the top of the next card's title. */
	margin: 0 0 43px;
}
/* The inner inset is a margin, not padding: live's title, image and link all
   measure 494 inside a 617 column, which is the box being narrower than the
   card, not the card being padded. And live left-aligns them — ours centred
   the title and the Read More link. */
.vk-archive__title {
	margin: 42px 26px 0;
	padding: 0;
	color: #272727;
	font-size: 30.6px;
	font-weight: 700;
	letter-spacing: -1.071px;
	line-height: 33.66px;
	text-align: justify;
}
.vk-archive__title a { color: inherit; text-decoration: none; }
.vk-archive__title a:hover { color: #88a6c3; }
/* Live's picture sits straight under the title, not 26px below it. */
.vk-archive__image { display: block; margin: 0 26px; }
.vk-archive__image img { display: block; width: 100%; height: auto; }
.vk-archive__more {
	margin: 26px 26px 0;
	color: #999;
	font-size: 14px;
	line-height: 25.2px;
	text-align: left;
}
.vk-archive__more a { color: #88a6c3; font-weight: 700; text-decoration: none; }

@media (max-width: 979px) { .vk-archive { grid-template-columns: 1fr; } }