/*
	README

	This file should only be used to style structure of the widget. It should not
	contain fonts or theme styling. Use the shared_theme.css for that purpose.

	If simply theming the CCL, leave this file alone.

	If your design is very customized, edit this file as needed. 
*/

.core-hero-image {
	position: relative;
	margin: 0 0 30px;
}

/* .hide-content also hides gradient */
.core-hero-image.hide-content .img-cont:after,
.core-hero-slideshow.hide-content .slide .img-cont:after, 
.core-hero-preview-slideshow.hide-content .img-cont:before {
	content: none;
}

.core-hero-image .content-section {
	padding: var(--space-8) var(--space-12);
	width: 100%;
	max-width: var(--width-comfortable);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-3);
	pointer-events: none;
}

.core-hero-image .slide-title {
    font-size: 2.43rem;
	margin-bottom: var(--space-2);
	line-height: var(--leading-tight);
	max-width: 80%;
	pointer-events: none;
}

.hero-image .content-section {
    padding: var(--space-8) 20px;
}

.hero-image .slide.overlap-image p {
    font-size: 1rem;
	font-weight: 100;
}

.hero-image .slide .slide-title {
	font-size: 1.5rem;
	font-weight: 900;
}

.hero-image .read-more {
	text-transform: uppercase;
	text-decoration: underline;
}

.hero-image .slide .slide-title {
	text-transform: uppercase;
    font-family: var(--mark-black);
}

.hero-image .slide:not(.dtn-outside-image) .img-cont .sponsored, 
.hero-image .mosaic-tile .img-cont .sponsored {
    display: none;
}

@media (min-width: 40em) {
	.core-hero-image .banner-title {
		max-width: 70%;
	}

	.hero-image .content-section {
		padding: 50px;
	}

	.hero-image .slide .slide-title {
		font-size: 2.5rem;
		font-family: var(--mark-black);
	}
	
	.hero-image .slide.overlap-image p {
		font-family: var(--font-body);
		font-size: 1.25rem;
		line-height: var(--leading-tight);
	}
	
	.hero-image .read-more {
		font-weight: 700;
	}
}

.core-hero-image .title-desc-container {
	width: 100%;
	max-width: var(--width-comfortable);
}

.core-hero-image .credits {
	flex-grow: 1;
	text-align: right;
}