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

.ccl-widget.mosaic .slides {
	max-width: var(--width-base);
	display: grid;
	grid-template-columns: 1.15fr 0.348fr 0.228fr 1.27fr;
	gap: 10px;
	padding: 0 var(--space-5);
	margin: 0 auto;
}

.ccl-widget.mosaic .slides .slide > .inner {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.ccl-widget.mosaic .slides .slide .img-cont,
.ccl-widget.mosaic .slides .slide .img-cont img { height: 100%; }

.ccl-widget.mosaic .slides .slide .img-cont img { object-fit: cover; }

.ccl-widget.mosaic .slides .slide .img-cont .shared-play-button {
	transform: unset;
	left: unset;
	top: var(--space-1);
	right: var(--space-1);
	height: var(--space-8);
	width: var(--space-8);
	font-size: var(--text-sm);
}

.ccl-widget.mosaic .slides .slide:nth-child(1) {
	grid-row: 1;
	grid-column: 1 / -1;
	aspect-ratio: 335 / 189
}

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

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

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

.ccl-widget.mosaic .slides .slide:nth-child(5) {
	grid-row: 3;
	grid-column: 2 / -1;
	aspect-ratio: 208 / 153
}

.ccl-widget.mosaic .slides .slide .content-section {
	position: absolute;
	bottom: var(--space-4);
	left: 0;
	line-height: 1.3;
	padding-right: var(--space-1);
}

.ccl-widget.mosaic .slides .slide .slide-title {
	display: inline;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-xl);
	line-height: unset;
	letter-spacing: var(--tracking-normal);
	color: var(--black-text);
	background: var(--white);
	padding: var(--space-1) var(--space-1) 3px;
	-moz-box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

@media (min-width: 40em) {
	.ccl-widget.mosaic .slides .slide:nth-child(1),
	.ccl-widget.mosaic .slides .slide:nth-child(2),
	.ccl-widget.mosaic .slides .slide:nth-child(3),
	.ccl-widget.mosaic .slides .slide:nth-child(4),
	.ccl-widget.mosaic .slides .slide:nth-child(5) { aspect-ratio: unset; }
}

@media (min-width: 64em) {
	.ccl-widget.mosaic .slides {
		grid-template-columns: 0.4798fr 0.360fr 0.086fr 0.5438fr;
		gap: var(--space-4);
	}
	
	.ccl-widget.mosaic .slides .slide:nth-child(1) {
		grid-row: 1;
		grid-column: 1 / 4;
	}
	
	.ccl-widget.mosaic .slides .slide:nth-child(2) {
		grid-row: 1;
		grid-column: 4 / -1;
	}
	
	.ccl-widget.mosaic .slides .slide:nth-child(3) {
		grid-row: 2;
		grid-column: 1;
	}
	
	.ccl-widget.mosaic .slides .slide:nth-child(4) {
		grid-row: 2;
		grid-column: 2;
	}
	
	.ccl-widget.mosaic .slides .slide:nth-child(5) {
		grid-row: 2;
		grid-column: 3 / -1;
	}

	.ccl-widget.mosaic .slides .slide .img-cont .shared-play-button {
		top: var(--space-2);
		right: var(--space-2);
		height: var(--space-10);
		width: var(--space-10);
		font-size: var(--text-base);
	}

	.ccl-widget.mosaic .slides .slide .content-section {
		line-height: 1.2;
		bottom: var(--space-8);
	}

	.ccl-widget.mosaic .slides .slide .slide-title {
		font-size: var(--text-3xl-1);
	}

	.ccl-widget.mosaic .slides .slide .slide-title {
		padding-left: var(--space-3);
		padding-right: var(--space-3);
	}
}