/**
 * Link Cards style: Large Cards
 *
 * An eyebrow and a headline over three photo cards. The card carries no surface here, so the
 * shipped .card's white body, radius and clip all come off and the photograph keeps the radius.
 */

.module.link-cards.style-large .container {
	row-gap: var(--text-spacing-xlarge);
}

.module.link-cards.style-large .intro {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	grid-column: 1 / span 10;
}

.module.link-cards.style-large .eyebrow {
	color: var(--storm);
	margin-block: 0;
}

.module.link-cards.style-large .cards {
	display: grid;
	gap: var(--gap);
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module.link-cards.style-large .card {
	background: none;
	border-radius: 0;
	column-gap: var(--text-spacing-small);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	overflow: visible;
	row-gap: var(--text-spacing-small);
}

.module.link-cards.style-large .card .media {
	border-radius: 10px;
	grid-column: 1 / -1;
}

.module.link-cards.style-large .card .content {
	align-self: center;
	padding: 0;
}

.module.link-cards.style-large .card > .arrow {
	align-self: center;
	margin: 0;
}

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

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

	.module.link-cards.style-large .intro {
		grid-column: 1 / -1;
	}

	.module.link-cards.style-large .cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Left, not centred: a lone card under a two-up grid reads as the start of a third row, and a
	   row starts at the column it would have filled. */
	.module.link-cards.style-large .cards > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		margin-inline: 0;
		max-width: calc((100% - var(--gap)) / 2);
		width: 100%;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.link-cards.style-large .cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.module.link-cards.style-large .intro {
		gap: var(--text-spacing-small);
	}

	.module.link-cards.style-large .cards > li:last-child:nth-child(odd) {
		max-width: none;
	}

}