/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Callout Tiles family. This enables the ability to
	a family of widgets in a single update without touching the structure of the widget and without needing
	to duplicate efforts across several widget-specific CSS files.
*/
.core-callout-tiles {
	--font-title: var(--font-display-agenda);
	--text-color: #fff;
}

.core-callout-tiles .slides {
	gap: var(--space-2mid);
}

.core-callout-tiles:not([data-width="full"]) .slides {
	max-width: calc(var(--width-base) + var(--space-10));
}

.core-callout-tiles .slide .content-section {
	align-items: flex-end;
	top: auto;
	bottom: 0;
	padding: 0;
	overflow: hidden;
}

.core-callout-tiles[data-width="full"][data-slides-across="3"] .slide .slide-title,
.core-callout-tiles[data-slides-across="4"] .slide .slide-title {
	font-size: var(--text-2xl);
	line-height: var(--leading-none);
	padding: var(--space-4);
	background-color: rgba(40, 78, 114,0.9);
	width: 100%;
}

@media(min-width: 64em) {
	.core-callout-tiles[data-width="full"][data-slides-across="3"] .slide .slide-title,
	.core-callout-tiles[data-slides-across="4"] .slide .slide-title {
		font-size: var(--text-3midxl);
		padding: var(--space-5);
	}
}