/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Slider 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-hero-image {
	border-top: 3px solid var(--white);
	margin-bottom: 3px;
}

.ccl-widget.core-hero-image .img-cont::after { content: none; }

.ccl-widget.core-hero-image .banner-content {
	bottom: 0;
	width: 100%;
	padding-bottom: 11px;
	padding-left: var(--space-2);
}

.ccl-widget.core-hero-image .banner-title,
.ccl-widget.core-hero-image .banner-title a {
	max-width: 100%;
	font-family: var(--font-display);
	font-size: 21.28px;
	font-weight: 900;
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-normal);
	color: var(--white);
	margin-bottom: 0;
}

@media (hover:hover) {
	.ccl-widget.core-hero-image .banner-title:hover,
	.ccl-widget.core-hero-image .banner-title a:hover { text-decoration: none; }
}

.ccl-widget.core-hero-image .banner-description {
	display: inline;
	font-family: var(--font-condensed);
	font-size: 15.41px;
	font-weight: 400;
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-wide);
	color: var(--white);
	padding-bottom: 0;
}

.ccl-widget.core-hero-image .link-btn {
	position: static;
	display: inline-block;
	background-color: transparent;
	padding: 0;
	margin-left: 6px;
}

.ccl-widget.core-hero-image .link-btn i {
	position: relative;
	top: 1px;
	color: var(--white);
	font-size: 18px;
}

.ccl-widget.core-hero-image .slides .slide .inner::before {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 39%;
	background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	opacity: 0.7;
	z-index: 0;
	pointer-events: none;
}

@media (min-width: 40em) {
	.ccl-widget.core-hero-image .banner-content {
		padding-bottom: 25px;
		padding-left: var(--space-8);
	}

	.ccl-widget.core-hero-image .banner-title,
	.ccl-widget.core-hero-image .banner-title a {
		font-size: 29px;
		margin-bottom: 5px;
	}

	.ccl-widget.core-hero-image .banner-description { font-size: 21px; }

	.ccl-widget.core-hero-image .link-btn i { font-size: 24px; }
}

@media (min-width: 64em) {
	.ccl-widget.core-hero-image { border-top: none; }
}