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

.core-v2-hero-image {
	margin: 0 0 38px;
}

.core-v2-hero-image .img-cont::before {
	display: block;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.72) 6.72%, rgba(0, 0, 0, 0.00) 42.59%);
}

.core-v2-hero-image.hide-content .img-cont::before {
	display: none;
}

.core-v2-hero-image :is(.content-upper, .content-section) {
	gap: 4px;
}

.core-v2-hero-image .content-section {
	padding: 20px 22px;
}

.core-v2-hero-image .slide-title {
	margin-bottom: 0;
	font-size: 1.375rem;
	line-height: var(--leading-tight);
}

.core-v2-hero-image .slide-desc {
	font-weight: normal;
	font-size: 0.875rem;
}

.core-v2-hero-image .slide-footer .read-more {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--white-fe);
}

.core-v2-hero-image .shared-play-button {
    inset: 80px 20px auto auto;
}

@media (hover: hover) {
	.core-v2-hero-image.animation-expand .slide:hover .slide-img {
		scale: 1.02;
	}

	@media (hover: hover) {
		.core-v2-hero-image .slide-footer .read-more:hover span::after {
			color: var(--sw-collections-read-more-color-hover);
		}

		.core-v2-hero-image .slide-footer .read-more:hover span::before{
			background-color: var(--white-fe);
		}
	}
}

@media screen and (min-width: 64em) {
	.core-v2-hero-image :is(.content-upper, .content-section) {
		gap: 8px;
	}

	.core-v2-hero-image .content-section {
		padding: 38px 72px;
	}

	.core-v2-hero-image .slide-title {
		font-size: 1.625rem;
	}

	.core-v2-hero-image .slide-desc {
		font-size: 1rem;
	}

	.core-v2-hero-image .slide-footer .read-more {
		font-size: 1.125rem;
	}

	.core-v2-hero-image .shared-play-button {
		inset: 100px 20px auto auto;
	}
}