/*
	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-hero-image {
	--slide-padding: 0 20px;

	z-index: 2;
    margin-bottom: 30px;
}

.core-hero-image .slides {
	position: relative;
	z-index: 2;
}

.core-hero-image .template-title {
	position: absolute;
	inset: 50% 0 auto 0;
	z-index: 3;
	transform: translateY(-50%);
	padding: 0 44px;
	font-family: var(--giorgio);
	font-weight: var(--font-weight-black);
	font-size: 5.3125rem;
	line-height: calc(13 / 17);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	color: var(--off-white);
	pointer-events: none;
}

.core-hero-image .template-title small {
	display: block;
	font-family: var(--typewriter);
	font-weight: normal;
	font-size: 0.9375rem;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: none;
}

.core-hero-image .slide {
    padding: var(--slide-padding);
    position: relative;
}

.core-hero-image.has-title .slide::before {
	position: absolute;
	inset: var(--slide-padding);
	z-index: 2;
	display: block;
	background: rgba(10, 60, 78, 0.5);
	content: '';
	pointer-events: none;
}

.core-hero-image .slide:after {
    content: '';
    height: 100%;
    width: calc(100% - 40px);
    position: absolute;
    right: 0;
    top: 20px;
    background-color: var(--blue);
    z-index: -1;
    pointer-events: none;
}

@media(min-width:64em) {
	.core-hero-image {
		--slide-padding: 30px;
	}

	.core-hero-image .template-title {
		font-size: 8.4375rem;
	}

	.core-hero-image .template-title small {
		font-size: 1.625rem;
	}

    .core-hero-image .slide:after {
        width: calc(100% - 60px);
        height: calc(100% - 60px);
        top: 60px;
    }
}