.ccl-v2-widget.mosaic {
	position: relative;
	padding: 0 10px;
	margin-bottom: 33px;
}
.ccl-v2-widget.mosaic .mosaic-title {
	padding: 0 var(--space-5);
}

.ccl-v2-widget.mosaic .mosaic-title img {
	max-width: 306px;
	margin: 0 auto var(--space-5);
}
.ccl-v2-widget.mosaic .cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.ccl-v2-widget.mosaic.add-monsters .cols .slide {
	aspect-ratio: 305 / 176;
}

.ccl-v2-widget.mosaic .slide .inner {
	position: relative;
	width: 100%;
	height: 100%;
}
.ccl-v2-widget.mosaic .slide .img-cont::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(100.19% 100.19% at 7.15% 7.15% , rgba(34, 34, 34, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}
.ccl-v2-widget.mosaic .slide .content-section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ccl-v2-widget.mosaic.add-monsters .slide .content-section {
	background-color: #E5FFFD;
	border-radius: 10px;
	background-repeat: no-repeat;
}

.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(1) .content-section {
	background-image: url(/includes/public/assets/shared/monsters/eugene.png);
	background-position: right -20% bottom 140%;
	background-size: 60%;
}
.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(2) .content-section {
	background-image: url(/includes/public/assets/shared/monsters/arty.png);
	background-position: right -20% bottom 140%;
	background-size: 60%;
}
.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(3) .content-section {
	background-image: url(/includes/public/assets/shared/monsters/usher.png);
	background-position: right -20% bottom 110%;
	background-size: 60%;
}
.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(4) .content-section {
	background-image: url(/includes/public/assets/shared/monsters/marsha.png);
	background-position: right -30% bottom 110%;
	background-size: 60%;
}
.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(5) .content-section {
	background-image: url(/includes/public/assets/shared/monsters/omar.png);
	background-position: right -20% bottom 140%;
	background-size: 60%;
}
.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(6) .content-section {
	background-image: url(/includes/public/assets/shared/monsters/nora.png);
	background-position: right -20% bottom 140%;
	background-size: 60%;
}
.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(7) .content-section {
	background-image: url(/includes/public/assets/shared/monsters/todd.png);
	background-position: right -22% bottom 90%;
	background-size: 60%;
}
.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(8) .content-section {
	background-image: url(/includes/public/assets/shared/monsters/ellie.png);
	background-position: right -27% bottom 98%;
	background-size: 60%;
}

.ccl-v2-widget.mosaic h4 {
	margin-top: var(--space-2);
	margin-left: var(--space-3);
	border-bottom: 4px solid transparent;
}

.ccl-v2-widget.mosaic h4,
.ccl-v2-widget.mosaic h4 a {
	font-size: var(--text-sm);
	line-height: var(--leading-none);
	color: var(--white);
	font-weight: 400;
	width: max-content;
	transition: opacity .1s;
	pointer-events: all;
	letter-spacing: var(--tracking-wider);
	max-width: 58%;
	padding-bottom: var(--space-1);
	transition: opacity var(--transition-appendix);
}

.ccl-v2-widget.mosaic:not(.add-monsters) h4,
.ccl-v2-widget.mosaic:not(.add-monsters) h4 a {
	pointer-events: none;
}

@media (min-width: 375px) {
	.ccl-v2-widget.mosaic h4,
	.ccl-v2-widget.mosaic h4 a {
		font-size: var(--text-base);
	}
}

.ccl-v2-widget.mosaic.add-monsters h4,
.ccl-v2-widget.mosaic.add-monsters h4 a {
	color: var(--off-black);
}

.ccl-v2-widget.mosaic .slide:nth-child(1) h4,
.ccl-v2-widget.mosaic .slide:nth-child(4) h4,
.ccl-v2-widget.mosaic .slide:nth-child(7) h4 {
	border-color: var(--pink);
}

.ccl-v2-widget.mosaic .slide:nth-child(2) h4,
.ccl-v2-widget.mosaic .slide:nth-child(5) h4,
.ccl-v2-widget.mosaic .slide:nth-child(8) h4 {
	border-color: var(--teal);
}

.ccl-v2-widget.mosaic .slide:nth-child(3) h4,
.ccl-v2-widget.mosaic .slide:nth-child(6) h4 {
	border-color: var(--salmon);
}

.ccl-v2-widget.mosaic .shared-play-button {
	left: unset;
	top: unset;
	right: var(--space-2);
	bottom: var(--space-2);
	transform: none;

}
@media (hover : hover) {
	.ccl-v2-widget.mosaic:not(.add-monsters) .slide:hover h4 a {
		opacity: .7;
	}
}

@media (min-width: 40em) {
	.panel-two-col .ccl-v2-widget.mosaic {
		margin-bottom: 0;
	}
	.ccl-v2-widget.mosaic .mosaic-title img {
		max-width: calc(306px + (550 - 306) * ((100vw - 640px) / (1023 - 640)));
	}
	.ccl-v2-widget.mosaic h4 {
		margin-top: var(--space-4);
		margin-left: var(--space-5);
	}
	.ccl-v2-widget.mosaic h4,
	.ccl-v2-widget.mosaic h4 a {
		font-size: var(--text-xl);
	}
}

@media (min-width: 64em) {
	.ccl-v2-widget.mosaic {
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 81px;
	}
	.ccl-v2-widget.mosaic .mosaic-title img {
		max-width: 1000px;
		margin-bottom: var(--space-12);
	}

	.ccl-v2-widget.mosaic .cols {
		max-width: 1360px;
		margin: 0 auto var(--space-10);
		grid-template-columns: 1fr 0.6fr 1fr 0.6fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: var(--space-3);
		padding: 0 var(--space-5);
	}
	.ccl-v2-widget.mosaic.add-monsters .cols .slide {
		aspect-ratio: 304 / 214;
	}

	.ccl-v2-widget.mosaic.add-monsters .cols .slide:nth-child(3),
	.ccl-v2-widget.mosaic.add-monsters .cols .slide:nth-child(6) {
		aspect-ratio: 182 / 438;
	}

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

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

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

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

	.ccl-v2-widget.mosaic .cols .slide:nth-child(8) {
		grid-column: 5;
		grid-row: 2
	}
	.ccl-v2-widget.mosaic .slide .inner {
		border-radius: 10px;
		overflow: hidden;
	}
	.ccl-v2-widget.mosaic .cols .slide img {
		scale: 1.3;
		transition: scale var(--transition-appendix-2);
	}

	@media (hover : hover) {
		.ccl-v2-widget.mosaic .cols .slide:hover img {
			scale: 1;
			transition: scale var(--transition-appendix-2);
		}
	}

	.ccl-v2-widget.mosaic h4 {
		margin-top: var(--space-5);
		border-bottom-width: 6px;
	}

	.ccl-v2-widget.mosaic h4,
	.ccl-v2-widget.mosaic h4 a {
		font-size: 1.375rem;
		font-weight: 800;
		letter-spacing: var(--tracking-wide);
	}

	.ccl-v2-widget.mosaic.add-monsters h4,
	.ccl-v2-widget.mosaic.add-monsters h4 a {
		font-size: calc(19px + (22 - 19) * ((100vw - 1024px) / (1200 - 1024)));;
	}

	.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(1) .content-section {
		background-position: right -32px bottom -60px;
		background-size: 80%;
	}
	.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(2) .content-section {
		background-position: right -37px bottom -80px;
		background-size: 88%;
	}
	.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(3) .content-section {
		background-position: left -51px bottom -14px;
		background-size: 119%;
	}
	.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(4) .content-section {
		background-position: right -15px bottom -45px;
		background-size: 50%;
	}
	.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(5) .content-section {
		background-position: right -15px bottom -60px;
		background-size: 90%;
	}
	.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(6) .content-section {
		background-position: right -6px bottom -4px;
		background-size: 158%;
	}
	.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(7) .content-section {
		background-position: right -35px bottom -158px;
		background-size: 76%;
	}
	.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(8) .content-section {
		background-position: right -10px bottom -181px;
		background-size: 59%;
	}
}

@media (min-width: 1200px) {
	.ccl-v2-widget.mosaic.add-monsters h4,
	.ccl-v2-widget.mosaic.add-monsters h4 a  {
		font-size: 1.375rem;
	}
	.ccl-v2-widget.mosaic.add-monsters .slide:nth-child(4) .content-section {
		background-position: right -15px bottom -65px;
		background-size: 65%;
	}
}