/**
 * Latest Posts — a heading over insight cards, two across.
 *
 * The cards are the shared post card; this file only places them. The two card columns sit a
 * double gap apart rather than on the twelve-column tracks.
 */

/*** Module: Latest Posts ***/

.module.latest-posts .container {
	row-gap: var(--text-spacing-xxlarge);
}

.module.latest-posts .intro {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-small) var(--text-spacing-large);
	grid-column: 1 / -1;
	justify-content: space-between;
}

.module.latest-posts .intro > :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

.module.latest-posts .posts {
	gap: var(--gap) calc(var(--gap) * 2);
	grid-column: 1 / -1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module.latest-posts .posts > li {
	display: flex;
}

.module.latest-posts .posts > li > * {
	flex: 1;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.latest-posts .container {
		row-gap: var(--text-spacing-large);
	}

	.module.latest-posts .posts {
		grid-template-columns: minmax(0, 1fr);
	}

}