.hero-mosaic {
		--main-slide-title: var(--asm-ftw-bold) var(--asm-fts-6xl)/var(--asm-ftl-dense) var(--asm-font-family);
		--main-slide-title-mobile: var(--asm-ftw-bold) var(--asm-fts-2xl)/var(--asm-ftl-dense) var(--asm-font-family);
		--main-slide-date: var(--asm-ftw-regular) var(--asm-fts-body)/var(--asm-ftl-dense) var(--asm-font-family);
		--main-slide-date-mobile: var(--asm-ftw-regular) var(--asm-fts-body)/var(--asm-ftl-dense) var(--asm-font-family);
		--secondary-slide-title: var(--asm-ftw-bold) var(--asm-fts-2xl)/var(--asm-ftl-dense) var(--asm-font-family);
		--secondary-slide-title-mobile: var(--asm-ftw-semi-bold) var(--asm-fts-lg)/var(--asm-ftl-compact) var(--asm-font-family);
		--secondary-slide-date: var(--asm-ftw-regular) var(--asm-fts-body)/var(--asm-ftl-dense) var(--asm-font-family);
		--secondary-slide-date-mobile: var(--asm-ftw-regular) var(--asm-fts-body)/var(--asm-ftl-dense) var(--asm-font-family);
		--tertiary-slide-title: var(--asm-ftw-semi-bold) var(--asm-fts-lg)/var(--asm-ftl-compact) var(--asm-font-family);
		--tertiary-slide-title-mobile: var(--asm-ftw-semi-bold) var(--asm-fts-lg)/var(--asm-ftl-compact) var(--asm-font-family);
		--tertiary-slide-date: var(--asm-ftw-regular) var(--asm-fts-body)/var(--asm-ftl-dense) var(--asm-font-family);
		--tertiary-slide-date-mobile: var(--asm-ftw-regular) var(--asm-fts-body)/var(--asm-ftl-dense) var(--asm-font-family);
}

.hero-mosaic .slides {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 390px 250px 250px 250px;
	gap: var(--space-1);
	border-block-start: 4px solid var(--asm-sw-white);
}

@media (min-width: 40em) {
	.hero-mosaic .slides {
		grid-template-rows: 390px 300px 300px 300px;
	}
}

@media (min-width: 64em) {
	.hero-mosaic .slides {
		display: grid;
		height: 650px;
		grid-template-columns: 1fr 1fr 27% 27%;
		grid-template-rows: repeat(2, 50%);
		grid-template-areas: 
			"main main wide wide"
			"main main smallA smallB";
		gap: var(--space-1);
	}

	.hero-mosaic .slide:nth-child(1) {
		grid-area: main;
	}

	.hero-mosaic .slide:nth-child(2) {
		grid-area: wide;
	}

	.hero-mosaic .slide:nth-child(3) {
		grid-area: smallA;
	}

	.hero-mosaic .slide:nth-child(4) {
		grid-area: smallB;
	}
}

.hero-mosaic .slides .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-mosaic .inner {
	height: 100%;
	display: grid;
}

.hero-mosaic .img-cont {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.hero-mosaic .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.hero-mosaic .content-section {
	width: 100%;
	z-index: 10;
}

.hero-mosaic .title-desc-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-5);
	container: title-desc-container / inline-size;
}


@media (min-width: 40em) {
	.hero-mosaic .slide:nth-child(1) .title-desc-container {
		gap: var(--space-5);
		margin: var(--space-10);
	}
}

@media (min-width: 40em) {
	.hero-mosaic .slide:nth-child(2) .title-desc-container {
		gap: 10px;
		margin: var(--space-10);
	}
}

.hero-mosaic .slide:nth-child(1) .title-desc-container .slide-title {
	font: var(--main-slide-title-mobile);
}

.hero-mosaic .slide:nth-child(2) .title-desc-container .slide-title {
	font: var(--secondary-slide-title-mobile);
}

.hero-mosaic .slide:nth-child(3) .title-desc-container .slide-title {
	font: var(--tertiary-slide-title-mobile);
}

.hero-mosaic .slide:nth-child(4) .title-desc-container .slide-title {
	font: var(--tertiary-slide-title-mobile);
}

.hero-mosaic .slide:nth-child(1) .title-desc-container .date {
	font: var(--main-slide-date-mobile);
}

.hero-mosaic .slide:nth-child(2) .title-desc-container .date {
	font: var(--secondary-slide-date-mobile);
}

.hero-mosaic .slide:nth-child(3) .title-desc-container .date {
	font: var(--tertiary-slide-date-mobile);
}

.hero-mosaic .slide:nth-child(4) .title-desc-container .date {
	font: var(--tertiary-slide-date-mobile);
}

@media (min-width: 40em) {
	.hero-mosaic .slide:nth-child(1) .title-desc-container .slide-title {
		font: var(--main-slide-title);
	}

	.hero-mosaic .slide:nth-child(2) .title-desc-container .slide-title {
		font: var(--secondary-slide-title);
	}

	.hero-mosaic .slide:nth-child(3) .title-desc-container .slide-title {
		font: var(--tertiary-slide-title);
	}

	.hero-mosaic .slide:nth-child(4) .title-desc-container .slide-title {
		font: var(--tertiary-slide-title);
	}

	.hero-mosaic .slide:nth-child(1) .title-desc-container .date {
		font: var(--main-slide-date);
	}

	.hero-mosaic .slide:nth-child(2) .title-desc-container .date {
		font: var(--secondary-slide-date);
	}

	.hero-mosaic .slide:nth-child(3) .title-desc-container .date {
		font: var(--tertiary-slide-date);
	}

	.hero-mosaic .slide:nth-child(4) .title-desc-container .date {
		font: var(--tertiary-slide-date);
	}
}

.hero-mosaic .title-desc-container a {
	width: fit-content;
	display: flex;
	align-items: center;
}

section.hero-mosaic .slide .title-desc-container .slide-title a:hover {
	color: var(--asm-sw-white);
	text-decoration: none;
}

.hero-mosaic .content-section .title-desc-container .date-section {
	color: var(--asm-sw-grey-light);
	display: flex;
	flex-direction: column;
}


.hero-mosaic .button-container {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

@media (min-width: 400px) {
	.hero-mosaic .button-container {
		gap: var(--space-10);
	}

	.hero-mosaic .button-container.no-gap {
		gap: var(--space-8);
	}
}

@media (max-width: 700px) {
	.card {
		grid-template-columns: 1fr;
	}
}

.button-text span {
	color: inherit;
}

@media (min-width: 40em) {
	@container title-desc-container (max-width: 270px) {
		.button-text span {
			width: min-content;
		}
	}

	@container title-desc-container (max-width: 335px) {
		.hero-mosaic .button-container {
			display: flex;
			align-items: center;
			gap: var(--space-4);
		}
	}
}

.hero-mosaic .venue-info-ctr {
	--venue-info-text: inherit;
	--venue-info-color: var(--asm-sw-grey-light);
}
