/*
	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 your design is very customized, edit this file as needed. 
*/

.asm-hero-image {
	--max-width-hero-content: 950px;
	position: relative;
}

/* .hide-content also hides gradient */
.asm-hero-image.hide-content .img-cont:after {
	content: none;
}

.asm-hero-image .content-section {
	left: 0;
	right: 0;
	padding: var(--asm-width-page-padding);
	margin-inline: auto; 
	width: 100%;
	max-width: var(--max-width-hero-content);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-3);
}

@media (min-width: 64em) {
	.asm-hero-image .content-section {
		padding-block: var(--space-10);
		padding-inline: 0;
	}
}

.asm-hero-image .slide.overlap-image .slide-title a:hover {
	text-decoration-line: none;
}

.asm-hero-image .title-desc-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	max-width: var(--max-width-hero-content);
	text-align: center;
}

.asm-hero-image .title-desc-container p {
	margin-block-end: var(--space-3);
}