.highlights_mosaic {
	margin-bottom: var(--widget-margin-bottom);
}

.highlights_mosaic .slide {
	margin-bottom: 10px;
}

.highlights_mosaic .inner {
	position: relative;
}

.highlights_mosaic .content-section {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	z-index: 1;
	padding: 0 var(--space-5);
	gap: var(--space-3);
	pointer-events: none;
}

.highlights_mosaic .slide.promoted .content-section {
	top: 45%;
}

.highlights_mosaic h4,
.highlights_mosaic h4 a {
	font-size: var(--text-4xl-half);
	color: var(--white);
	line-height: var(--leading-none);
	text-transform: uppercase;
	text-align: center;
}

.highlights_mosaic .icon-cont img {
	-webkit-filter: grayscale(1) invert(1) brightness(1.5);
	filter: grayscale(1) invert(1) brightness(1.5);
}

.highlights_mosaic .slide .img-cont {
	position: relative;
}

.highlights_mosaic img.tile-img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.highlights_mosaic .slide .img-cont::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--black);
	opacity: .3;
	z-index: 0;
	pointer-events: none;
}

.highlights_mosaic img.romance_graphic, 
.highlights_mosaic img.bird_park_deco_tile_graphic {
	width: 66px;
}

.highlights_mosaic img.fish_graphic {
	width: 110px;
	margin-bottom: -8px;
}

.highlights_mosaic img.bison_graphic,
.highlights_mosaic img.dining_graphic {
	width: 71px;
}

.highlights_mosaic img.arch_graphic {
	width: 79px;
}

.highlights_mosaic .credits {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: var(--space-1) var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	text-shadow: 0 0 20px var(--black);
	color: var(--white);
	pointer-events: none;
	z-index: 10;
	letter-spacing: var(--tracking-wide);
	line-height: var(--leading-none);
}
.highlights_mosaic .credits a,
.highlights_mosaic .credits a:hover {
	color: inherit;
	position: relative;
	z-index: 100;
	pointer-events: all;
}
.highlights_mosaic .credits a:hover {
	text-decoration: underline;
}

@media (min-width: 64em) {
	.highlights_mosaic .cols {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: minmax(50px, 1fr);
		gap: 10px;
		display: grid;
	}

	.highlights_mosaic .slide {
		margin-bottom: unset;
	}

	.highlights_mosaic .slide:nth-child(1) {
		grid-column: 1 / span 2;
		grid-row: 1 / span 2;
	}

	.highlights_mosaic .slide:nth-child(2) {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
	}

	.highlights_mosaic .slide:nth-child(3) {
		grid-column: 4 / span 1;
		grid-row: 1 / span 1;
	}

	.highlights_mosaic .slide:nth-child(4) {
		grid-column: 1 / span 1;
		grid-row: 3 / span 1;
	}

	.highlights_mosaic .slide:nth-child(5) {
		grid-column: 2 / span 1;
		grid-row: 3 / span 1;
	}

	.highlights_mosaic .slide:nth-child(6) {
		grid-column: 3 / span 2;
		grid-row: 2 / span 2;
	}

	.highlights_mosaic h4, .highlights_mosaic h4 a {
		font-size: var(--text-6xl);
	}
}