.ccl-widget.mosaic { margin-bottom: var(--space-20); }
.ccl-widget.mosaic .widget-header { margin-bottom: var(--space-5); }
.ccl-widget.mosaic .widget-view-all-cont { padding: 0 var(--space-5); }

.ccl-widget.mosaic .widget-view-all {
	background: #009AA633 0% 0% no-repeat padding-box;
	color: var(--white);
	border-radius: 10px;
	border: none;
	font-size: var(--text-base);
	text-transform: uppercase;
	text-shadow: 0px 3px 6px #00000029;
	letter-spacing: var(--tracking-wide);
	width: 100%;
    text-align: center;
	padding: 8px var(--space-5);
}

.ccl-widget.mosaic:not(.core-callout-tiles) .slides {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	gap: 14px;
	padding: 0 var(--space-5) var(--space-5);
}

.ccl-widget.mosaic .slide .img-cont,
.ccl-widget.mosaic .slide .img-cont img {
	width: 100%;
	height: 100%;
	position: relative;
	object-fit: cover;
	border-radius: 10px;
}

.ccl-widget.mosaic .slide .img-cont::after {
	content: '';
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent linear-gradient(-180deg, #00000000 0%, #000000A5 100%) 0% 0% no-repeat padding-box;
	opacity: 0.7;
	pointer-events: none;
}
.ccl-widget.mosaic .content-section {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
	padding: 0 var(--space-3) var(--space-3) var(--space-2);
    pointer-events: none;
}
.ccl-widget.mosaic .content-section .slide-title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
	line-height: var(--leading-tighter);
    color: var(--white);
	text-transform: uppercase;
    text-shadow: 0px 3px 6px #00000029;
	letter-spacing: 0.02em;
    font-weight: 700;
}

.ccl-widget.mosaic .credits {
	font-size: 10.5px;
    font-family: var(--font-body);
    font-weight: 500;
    opacity: 0.7;
    margin: 2px 10px;
}
@media (min-width: 40em) {
	.ccl-widget.mosaic .widget-header {
		margin-bottom: var(--space-8);
	}
	.ccl-widget.mosaic:not(.core-callout-tiles) .slides {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		padding-bottom: 25px;
	}
}

@media (min-width: 64em) {
	.ccl-widget.mosaic {
		margin-bottom: var(--space-24);
	}
	.ccl-widget.mosaic .widget-header {
		margin-bottom: var(--space-10);
		max-width: 668px;
	}

	.ccl-widget.mosaic .widget-view-all-cont, 
	.ccl-widget.mosaic .slides,
	.ccl-widget.mosaic.core-callout-tiles .slides {
		max-width: 1135px;
		margin: 0 auto;
	}
	.ccl-widget.mosaic:not(.core-callout-tiles) .slides {
		gap: var(--space-5);
	}
	.ccl-widget.mosaic .content-section {
		padding: 0 var(--space-6) var(--space-4) var(--space-5);
	}

	.ccl-widget.mosaic .content-section .slide-title {
		font-size: var(--text-2xl-2);
	}

	.ccl-widget.mosaic .widget-view-all {
		font-size: var(--text-2xl-2);
		padding: 10px var(--space-5);
	}

	@media (hover : hover) {
		.ccl-widget.mosaic .slide .inner .img-cont img { 
			transform-origin: center;
			transition: transform 0.4s ease-in-out; 
		}
		.ccl-widget.mosaic .slide .inner .content-section { transition: padding 0.4s ease-in-out; }

		.ccl-widget.mosaic .slide:hover .inner .img-cont img {
			transform: scale(1.1);
		}

		.ccl-widget.mosaic .slide:hover .inner .content-section {
			padding-bottom: 28px;
		}

		.ccl-widget.mosaic .widget-view-all:hover {
			background-color: var(--blue-green);
		}
	}
}