/*
	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 {
	margin-bottom: var(--space-1);
	padding-top:0;
}
.core-callout-tiles:not([data-width="full"]) { margin-bottom: var(--space-10);}
.core-callout-tiles:not([data-width="full"]) .slides { padding: 0;}
.core-callout-tiles .slides { gap: var(--space-1);}
.core-callout-tiles[data-width="full"] .slide .content-section {
	align-items: flex-end;
    justify-content: left;
}
.ccl-widget.core-callout-tiles .slide .slide-title {
	font-size: var(--text-5xl);
	color: var(--white);
	font-weight: bold;
	line-height: var(--leading-tight);
	text-shadow: 0px 1px 21px rgba(0, 0, 0, 0.6);
	vertical-align: middle;
}
.core-callout-tiles[data-width="full"] .slide .slide-title {
	font-size: var(--text-lg);
	text-align: left;
}
.core-callout-tiles[data-width="full"] .slide .slide-title::after {
	content: "\f101";
	font-family: "Font Awesome 5 Free";
	font-size: 20px;
}
.core-callout-tiles .slide .img-cont::after {
	background: rgba(0, 0, 0, 0.3) center;
	transition: all ease .3s;
}
@media (hover: hover) {
	.core-callout-tiles .slide:hover .img-cont::after {
		background: rgba(26,146,186, 0.8);
	}
	.core-callout-tiles[data-width="full"] .slide:hover .img-cont::after {
		background: rgba(26,146,186, 0.8) url(/includes/public/assets/icon-star.png) center no-repeat;
    	background-size: 101px;
	}
	.core-callout-tiles .slide:hover .img-cont img { transform: none;}
}
@media (min-width: 40em) {
	.core-callout-tiles { margin-bottom: var(--space-2);}
	.core-callout-tiles:not([data-width="full"]) { margin-bottom: var(--space-28);}
	.core-callout-tiles[data-width="full"] .slides {gap: var(--space-2);}
	.core-callout-tiles:not([data-width="full"]) .slides {
		padding: 0 var(--space-5);
		gap: var(--space-4);
	}
	.core-callout-tiles:not([data-width="full"]) .slides .img-cont { border-radius: var(--rounded-lg);}
	.core-callout-tiles[data-width="full"] .slide .slide-title { font-size: var(--text-3xl);	}
	.core-callout-tiles[data-width="full"] .slide .slide-title::after { font-size: var(---text-3xl);}

}

@media (min-width: 40em) and (max-width: 64em) {
	.ccl-widget.core-callout-tiles .slide .slide-title {
		font-size: var(--text-2xl);
		line-height: var(--leading-x-tight);
	}
}