.ccl-widget.mosaic { margin-bottom: var(--space-16); }

.ccl-widget.mosaic .widget-header {
	max-width: 1002px;
	padding: 0 var(--space-4);
	margin-bottom: var(--space-5);
}

.ccl-widget.mosaic .widget-header-inner {
	flex-direction: column;
	align-items: center;
	padding-bottom: 0;
}

.ccl-widget.mosaic .widget-header .widget-title {
	position: relative;
	text-align: center;
	margin-right: 0;
}

.ccl-widget.mosaic .widget-header .widget-title::after {
	content: '';
	position: absolute;
	bottom: -14px;
	left: 50%;
	transform: translateX(-50%);
	width: 150px;
	height: 3px;
	background-color: var(--blue-13);
	pointer-events: none;
}

.ccl-widget.mosaic .widget-header .widget-description {
	font-family: var(--font-zilla);
	font-size: var(--text-xl);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--tracking-normal);
	color: var(--black-28);
	text-align: center;
}

.ccl-widget.mosaic .slides-outer { position: relative; }

.ccl-widget.mosaic .slides-outer::after {
	content: '';
	position: absolute;
	top: 50%;
	left:0;
	transform: translateY(-50%);
	z-index: 0;
	width: 100%;
	height: calc(100% - 196px);
	background: url(https://assets.simpleviewinc.com/simpleview/image/upload/v1/clients/gwinnettga/white_texture_9650d787-0cb6-4482-a85b-11d60e5cec1a.avif);
	background-size: cover;
	background-repeat: no-repeat;
	pointer-events: none;
}

.ccl-widget.mosaic .slides {
	position: relative;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1.15fr 1fr 1.15fr 1fr;
	max-width: 1370px;
	display: grid;
	gap: var(--space-2);
	padding: 0 var(--space-4);
	margin: 0 auto;
}

.ccl-widget.mosaic .slide {
	position: relative;
	z-index: 1;
	border-radius: 15px;
}

.ccl-widget.mosaic .slide > .inner { overflow: hidden; }

.ccl-widget.mosaic .slide:nth-child(1) {
	grid-row: 1;
	grid-column: 1 / -1;
}

.ccl-widget.mosaic .slide:nth-child(2) {
	grid-row: 2;
	grid-column: 1;
}

.ccl-widget.mosaic .slide:nth-child(3) {
	grid-row: 2;
	grid-column: 2;
}

.ccl-widget.mosaic .slide:nth-child(4) {
	grid-row: 3;
	grid-column: 1 / -1;
}

.ccl-widget.mosaic .slide:nth-child(5) {
	grid-row: 4;
	grid-column: 1;
}

.ccl-widget.mosaic .slide:nth-child(6) {
	grid-row: 4;
	grid-column: 2;
}

.ccl-widget.mosaic .slide .img-cont { position: relative; }

.ccl-widget.mosaic .slide .img-cont::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--black);
	opacity: 0.35;
	border-radius: 15px;
	pointer-events: none;
	transition: background-color var(--transition-appendix), opacity var(--transition-appendix);
}

@media (hover: hover) {
	.ccl-widget.mosaic .slide .img-cont:hover::after {
		opacity: 1;
		background-color: #139DD9BF;
	}
}

.ccl-widget.mosaic .slide .img-cont .credits {
	bottom: unset;
	right: unset;
	top: 0;
	left: 0;
	margin: var(--space-1);
}

.ccl-widget.mosaic .slide .content-section {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--space-3);
	padding: 15px;
	border-radius: 15px;
	pointer-events: none;
}

.ccl-widget.mosaic .slide :is(.slide-title, .slide-title a) {
	font-family: var(--font-display);
	font-size: min(calc(16px + (26 - 16) * ((100vw - 320px) / (375 - 320))), 1.625rem);
	font-weight: 700;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-normal);
	color: var(--white);
	text-align: center;
}

.ccl-widget.mosaic .slide .icon { border-radius: unset; }

.ccl-widget.mosaic .slide .icon.shopping {
	min-height: 53px;
	min-width: 45px;
	max-height: 53px;
	max-width: 45px;
}

.ccl-widget.mosaic .slide .icon.history {
	min-height: 42px;
	min-width: 40px;
	max-height: 42px;
	max-width: 40px;
}

.ccl-widget.mosaic .slide .icon.beer {
	min-height: 51px;
	min-width: 47px;
	max-height: 51px;
	max-width: 47px;
}

.ccl-widget.mosaic .slide .icon.outdoors {
	min-height: 62px;
	min-width: 42px;
	max-height: 62px;
	max-width: 42px;
}

.ccl-widget.mosaic .slide .icon.art {
	min-height: 44px;
	min-width: 59px;
	max-height: 44px;
	max-width: 59px;
}

.ccl-widget.mosaic .slide .icon.nightlife {
	min-height: 49px;
	min-width: 43px;
	max-height: 49px;
	max-width: 43px;
}

@media (min-width: 40em) {
	.ccl-widget.mosaic .slides-outer::after {
		background-size: 100%;
		background-repeat: repeat;
	}

	.ccl-widget.mosaic .slide :is(.slide-title, .slide-title a) {
		font-size: 2.25rem;
		line-height: 1.05;
	}

	.ccl-widget.mosaic .slide .icon.shopping {
		min-height: 75px;
		min-width: 64px;
		max-height: 75px;
		max-width: 64px;
	}
	
	.ccl-widget.mosaic .slide .icon.history {
		min-height: 57px;
		min-width: 50px;
		max-height: 57px;
		max-width: 50px;
	}
	
	.ccl-widget.mosaic .slide .icon.beer {
		min-height: 71px;
		min-width: 65px;
		max-height: 71px;
		max-width: 65px;
	}
	
	.ccl-widget.mosaic .slide .icon.outdoors {
		min-height: 89px;
		min-width: 60px;
		max-height: 89px;
		max-width: 60px;
	}
	
	.ccl-widget.mosaic .slide .icon.art {
		min-height: 64px;
		min-width: 86px;
		max-height: 64px;
		max-width: 86px;
	}
	
	.ccl-widget.mosaic .slide .icon.nightlife {
		min-height: 62px;
		min-width: 55px;
		max-height: 62px;
		max-width: 55px;
	}
}

@media (min-width: 64em) {
	.ccl-widget.mosaic { margin-bottom: var(--space-32); }

	.ccl-widget.mosaic .widget-header {
		max-width: 1002px;
		margin-bottom: var(--space-5);
	}
	
	.ccl-widget.mosaic .widget-header .widget-title {
		font-size: 4rem;
		line-height: 1.2;
	}
	
	.ccl-widget.mosaic .widget-header .widget-description { font-size: var(--text-2xl); }

	.ccl-widget.mosaic .slides {
		grid-template-rows: repeat(3, auto);
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}

	.ccl-widget.mosaic .slides-outer::after {
		background: url(/includes/public/assets/shared/mosaic-texture.png);
		background-size: unset;
		background-repeat: repeat-x;
		height: max(470px, calc(100% - 273px));
	}

	.ccl-widget.mosaic .slide:nth-child(1) {
		grid-row: 1 / 3;
		grid-column: 1;
	}

	.ccl-widget.mosaic .slide:nth-child(2) {
		grid-row: 3;
		grid-column: 1;
	}

	.ccl-widget.mosaic .slide:nth-child(3) {
		grid-row: 1;
		grid-column: 2;
	}

	.ccl-widget.mosaic .slide:nth-child(4) {
		grid-row: 2 / -1;
		grid-column: 2;
	}

	.ccl-widget.mosaic .slide:nth-child(5) {
		grid-row: 1 / 3;
		grid-column: 3;
	}

	.ccl-widget.mosaic .slide:nth-child(6) {
		grid-row: 3;
		grid-column: 3;
	}

	.ccl-widget.mosaic .slide :is(.slide-title, .slide-title a) { font-size: min(calc(30px + (36 - 30) * ((100vw - 1024px) / (1440 - 1024))), 2.25rem); }
}