/**
 * Awards
 *
 * A heading beside its pager, then a track of logo tiles starting on the container's left
 * edge and running off the right of the screen. Four fit the row; a fifth is what turns it
 * into a carousel — Jazzy decides that from the track's own width, not a stored field.
 */

.module.awards {
	overflow-x: clip;
}

.module.awards .container {
	row-gap: var(--text-spacing-xlarge);
}

.module.awards .container > .heading-5 {
	align-self: center;
	grid-column: 1 / span 7;
	grid-row: 1;
}

.module.awards .arrows {
	align-self: center;
	display: flex;
	gap: 12px;
	grid-column: 8 / -1;
	grid-row: 1;
	justify-content: flex-end;
	margin-right: var(--container-breakout-full);
}

.module.awards:has(.jazzy-static) .arrows {
	display: none;
}

/** Track **/

.module.awards .container > :is(.cards, .jazzy-carousel-wrapper) {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-right: var(--viewport-edge);
}

.module.awards .container > .cards.jazzy-static {
	margin-right: 0;
}

.module.awards .cards {
	display: flex;
	gap: var(--text-spacing-medium);
	list-style: none;
	margin-block: 0;
	padding: 0;
}

.module.awards .cards > li {
	display: flex;
	flex: 1;
}

.module.awards .award {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/** Card **/

.module.awards .logo-tile {
	aspect-ratio: 269 / 180;
	height: auto;
	width: 100%;
}

.module.awards .text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: var(--text-spacing-small);
}

.module.awards .text > * {
	margin: 0;
}

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

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

	.module.awards .container {
		row-gap: var(--text-spacing-small);
	}

}

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

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

	.module.awards .container > .heading-5 {
		grid-column: 1 / -1;
	}

	.module.awards .arrows {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: flex-start;
		margin-right: 0;
	}

	.module.awards .container > :is(.cards, .jazzy-carousel-wrapper) {
		grid-row: 3;
	}

}