/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Image Box 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-imagebox {
	--gap: 2px;

	padding: 0;
	margin-bottom: var(--gap);
}

.core-imagebox .slides {
	gap: var(--gap);
}

.core-imagebox .img-cont::after {
	background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 100%);
}

.core-imagebox .content-section {
	left: 0;
	bottom: 0;
	width: 100%;
	max-width: 750px;
	margin: 0;
	padding: 22px 15px;
}

.core-imagebox .content-section .slide-title {
	font-weight: var(--font-weight-light);
	font-size: var(--text-3xl);
	line-height: var(--leading-none);
	letter-spacing: .02rem;
	text-transform: uppercase;
	margin-bottom:10px;
}

.core-imagebox .content-section .slide-title > a {
	color: inherit !important;
	text-decoration: none !important;
}

.core-imagebox .content-section p {
	font-weight: var(--font-weight-medium);
	font-size: .9375rem;
	line-height: var(--leading-tight);
	letter-spacing: .02rem;
}

.core-imagebox .slide .slide-footer {
	margin: 0;
}

.core-imagebox .slide .slide-footer > * {
	margin: 0;
}

@media (min-width: 64em) {
	.core-imagebox .content-section .slide-title {
		font-size: var(--text-4xl);
	}
}

@media (min-width: 90em) {
	.core-imagebox .img-cont::after {
		top: 0;
		height: auto;
		background: radial-gradient(circle at left bottom, rgba(0,0,0,.7), rgba(0,0,0,0) 100%);
	}

	.core-imagebox .content-section {
		padding: 50px 44px;
	}

	.core-imagebox .content-section .slide-title {
		font-size: 4.375rem;
		margin-bottom: 18px;
	}

	.core-imagebox .content-section p {
		font-size: 1.0625rem;
		line-height: 1.647;
		margin-bottom: 27px;
	}
}