.ccl-widget.core-imagebox.mosaic {
	position: relative;
	padding: 0px 24px;
	margin-bottom: var(--space-16);
	background:#f3eadb;
}
.ccl-widget.core-imagebox.mosaic .title-cont  {
	text-align: center;
}
.ccl-widget.core-imagebox.mosaic .title-cont h2 {
	color: var(--yellow-light);
	font-size: calc(45px + (95 - 45) * ((100vw - 320px) / (640 - 320)));
	line-height: var(--leading-none);
	text-transform: lowercase;
}

.ccl-widget.core-imagebox.mosaic .title-cont .title-1 {
	font-family: var(--font-display-rivers);
}
.ccl-widget.core-imagebox.mosaic .title-cont .title-2 {
	font-family: var(--font-display-open);
	line-height: 0.9;
}
.ccl-widget.core-imagebox.mosaic .slides {
	display: grid;
	grid-gap: 10px;
	padding: var(--space-8) 0 28px;
}

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

.ccl-widget.core-imagebox.mosaic .slide .img-cont:before {
	content: '';
    position: absolute;
	bottom: -1px;
    right: -1px;
    width: 36px;
    height: 60px;
	z-index: 1;
    pointer-events: none;
    background-color: var(--burnt);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.ccl-widget.core-imagebox.mosaic .slide.item-2 .img-cont:before { background-color: var(--burnt-light); }
.ccl-widget.core-imagebox.mosaic .slide.item-3 .img-cont:before { background-color: var(--blue-light); }
.ccl-widget.core-imagebox.mosaic .slide.item-4 .img-cont:before { background-color: var(--green-drab); }
.ccl-widget.core-imagebox.mosaic .slide.item-5 .img-cont:before { background-color: var(--blue); }
.ccl-widget.core-imagebox.mosaic .slide.item-6 .img-cont:before { background-color: var(--yellow); }

.ccl-widget.core-imagebox.mosaic .slide .img-cont .shared-play-button {
	transform: unset;
	left: unset;
	top: var(--space-2);
	right: var(--space-2);
	height: var(--space-12);
	width: var(--space-12);
	background-size: contain;
}

.ccl-widget.core-imagebox.mosaic .slide .img-cont .shared-play-button i {
	font-size: var(--text-base);
}

.ccl-widget.core-imagebox.mosaic .slide .content-section {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: var(--space-4) 18px;
	pointer-events: none;
}

.ccl-widget.core-imagebox.mosaic .slide .slide-title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 500;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-wide);
	color: var(--white);
	margin-bottom: var(--space-1);
}

.ccl-widget.core-imagebox.mosaic .slide .slide-title a {
	font-size: inherit;
	letter-spacing: inherit;
	z-index: 1;
    position: relative;
}

.ccl-widget.core-imagebox.mosaic .slide .slide-footer {
	margin: unset;
}
.ccl-widget.core-imagebox.mosaic .slide .slide-footer a.read-more {
	color: var(--white);
	margin: unset;
}

.ccl-widget.core-imagebox.mosaic .slide .slide-footer a:after {
	background: url(../svg/read-more-arrow-white.svg);
	right: -10px;
}

.ccl-widget.core-imagebox.mosaic .widget-view-all {
	margin: var(--space-3) 0 0;
    width: max-content;
    place-self: center;
	padding: 9.5px 25px 7.5px var(--space-5);
}

.ccl-widget.core-imagebox.mosaic .widget-view-all::after {
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.ccl-widget.core-imagebox.mosaic .credits {
	font-size: 0.625rem;
	opacity: 0.85;
}

@media (min-width: 40em) {
	.ccl-widget.core-imagebox.mosaic {
		padding: 0px 20px;
	}
	.ccl-widget.core-imagebox.mosaic .title-cont h2 {
		font-size: calc(90px + (130 - 90) * ((100vw - 640px) / (1024 - 640)));
		line-height: 0.8;
	}
	.ccl-widget.core-imagebox.mosaic .slides {
		margin: 0 auto;
		width: 100%;
		padding: var(--space-16) 0 28px;
		max-width: 800px;
	}

	.ccl-widget.core-imagebox.mosaic .slide > .inner,
	.ccl-widget.core-imagebox.mosaic .slide .img-cont,
	.ccl-widget.core-imagebox.mosaic .slide .img-cont img {
		height: 100%;
	}

	.ccl-widget.core-imagebox.mosaic .slide .img-cont:before {
		width: 48.15px;
		height: 81.2px;
	}
	.ccl-widget.core-imagebox.mosaic .slide .img-cont img {
		object-fit: cover;
	}
}

@media (min-width: 64em) {
	.ccl-widget.core-imagebox.mosaic {
		margin-bottom: var(--space-32);
	}
	.ccl-widget.core-imagebox.mosaic .title-cont {
		grid-column: 3 / span 3;
		grid-row: 1 / span 2;
	}

	.ccl-widget.core-imagebox.mosaic .title-cont h2 {
		font-size: calc(80px + (110 - 80) * ((100vw - 1024px) / (1440 - 1024)));
	}
	
	.ccl-widget.core-imagebox.mosaic .slides {
		grid-template-columns: 0.425fr 376px 0.931fr 376px 0.415fr;
		grid-template-rows: 15px 0.4fr 0.615fr 0.5fr 356px 0.402fr 0.398fr;
		padding: var(--space-20) 0 var(--space-12);
		max-width: 1160px;
	}

	.ccl-widget.core-imagebox.mosaic .slide .img-cont {
		overflow: hidden;
	}
	.ccl-widget.core-imagebox.mosaic .slide.item-1 { 
		grid-column: 1 / span 2;
		grid-row: 2 / span 2;
	}
	.ccl-widget.core-imagebox.mosaic .slide.item-2 { 
		grid-column: 3 / span 3;
		grid-row: 3 / span 2;
	}

	.ccl-widget.core-imagebox.mosaic .slide.item-3 { 
		grid-column: 2 / span 1;
		grid-row: 4;
	}

	.ccl-widget.core-imagebox.mosaic .slide.item-4 { 
		grid-column: 1 / span 3;
		grid-row: 5 / span 2;
	}
	
	.ccl-widget.core-imagebox.mosaic .slide.item-5 { 
		grid-column: 4 / span 2;
		grid-row: 5;
	}
	.ccl-widget.core-imagebox.mosaic .slide.item-6 { 
		grid-column: 4;
		grid-row: 6 / span 2;
	}
	.ccl-widget.core-imagebox.mosaic .slide .slide-title {
		font-size: calc(24px + (30 - 24) * ((100vw - 1025px) / (1440 - 1025)));
	}

	.ccl-widget.core-imagebox.mosaic .slide .slide-footer {
		pointer-events: all;
	}
	.ccl-widget.core-imagebox.mosaic .widget-view-all {
		grid-column: 1 / span 3;
		grid-row: 7;
		place-self: start;
		justify-self: end;
		margin: unset;
	}

	@media (hover : hover) {
		.ccl-widget.core-imagebox.mosaic .slide .slide-footer a:after {
			transition: transform var(--transition-appendix);
		}
		.ccl-widget.core-imagebox.mosaic .slide .slide-footer:hover a:after {
			transform: translateX(calc(100% + 5px));
		}
	}
}

@media (min-width: 90em) {
	.ccl-widget.core-imagebox.mosaic {
		padding: 0px 18px;
	}
	.ccl-widget.core-imagebox.mosaic .title-cont h2 {
		font-size: 110px;
	}
	.ccl-widget.core-imagebox.mosaic .slide .slide-title {
		font-size: var(--text-3xl);
	}
	.ccl-widget.core-imagebox.mosaic .slide .description {
		font-size: 0.9375rem;
	}
}

@media (min-width: 64em) {
	.ccl-widget.core-imagebox.mosaic  .mosaic-tiles-wrapper {
		display: grid;
		grid-template-columns: 58px 1fr 160px 1fr 56px;
		grid-template-rows: 87px 215px 239px 344px 112px 85px;
		gap: calc(35px + (42 - 35) * ((100vw - 1025px) / (1440 - 1025)));
	}	
}