/*
	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.
*/

.ccl-widget.core-callout-tiles .widget-header .widget-header-inner {
	justify-content: center;
	padding-bottom: none;
	border-bottom: none;
}

.ccl-widget.core-callout-tiles .widget-header .widget-header-inner .widget-title {
	font-family: var(--font-display);
	color: var(--dark-blue);
	text-align: center;
	margin-right: 0;
}

.ccl-widget.core-callout-tiles .slides {
	position: relative;
	padding: 0 10px;
}

.ccl-widget.core-callout-tiles .slides .slide {
	border-radius: 10px;
	box-shadow: -1px 3px 10px 0px rgb(0 0 0 / 30%);
}

.ccl-widget.core-callout-tiles .slides .slide .img-cont,
.ccl-widget.core-callout-tiles .slides .slide .img-cont img { border-radius: 10px; }

.ccl-widget.core-callout-tiles .slides .slide .img-cont::before {
	content: "";
	position: absolute;
	bottom: 240px;
	left: 25;
	z-index: 2;
	height: 100%;
	width: 100%;
	background-image: url(/includes/public/assets/shared/collections/trails-overlay.svg);
	background-repeat: no-repeat;
	pointer-events: none;
	opacity: 0;
	transform: scale(3.3);
	transition: ease all 0.3s
}

.ccl-widget.core-callout-tiles:not(.callout-tiles-4-across) .slides .slide .img-cont::after { 
	background: rgba(115,155,169,0.4); 
}

.ccl-widget.core-callout-tiles .slides .slide .slide-title,
.ccl-widget.core-callout-tiles .slides .slide .slide-title a{
	font-family: var(--font-display);
	color: var(--white);
	text-align: center;
	text-transform: uppercase;
	text-rendering: optimizeLegibility;
}

@media (hover:hover) {
	.ccl-widget.core-callout-tiles .slides .slide:hover .img-cont::before { opacity: 0.7; }

	.ccl-widget.core-callout-tiles .slides .slide:hover .img-cont img { transform: initial; }
}

@media (min-width: 40em) {
	@media(hover:hover){
		.ccl-widget.core-callout-tiles .slides .slide .img-cont::before { transform: scale(4); }
	}
}

@media (min-width: 64em) {
	@media(hover:hover) {
		.ccl-widget.core-callout-tiles .slides .slide .img-cont::before {
			bottom: 280px;
			left: 0;
			transform: scale(3.4);
		}
	}
}