/*
	README

	This file should only be used to style structure of the widget. It should not
	contain fonts or theme styling. Use the shared_theme.css for that purpose.

	If simply theming the CCL, leave this file alone.

	If your design is very customized, edit this file as needed. 
*/

/*=============================*/
/*=====----- GENERAL -----=====*/
/*=============================*/

/*.ccl-v2-widget.vertical .widget-inner {
	gap: var(--space-8);
}*/

.core-v2-marquee.vertical .slides {
	gap: var(--space-4);
	padding: 0;
}

.core-v2-marquee .inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.core-v2-marquee .slide .content-section {
	order: 1;
	display: grid;
	place-items: center;
}

.core-v2-marquee .slide .slide-top {
	order: 0;
}

.core-v2-marquee.vertical .slide.major .slide-top {
	width: 100%;
	clip-path: polygon(0% 0%, 89.68% 0%, 100% 100%, 0% 100% );
}

.core-v2-marquee.vertical .slide.major {
		grid-column: span 2;
	}

.core-v2-marquee.vertical .slide.major .content-section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	position: static;
	padding: var(--space-5) var(--space-4) var(--space-6);
} 

.core-v2-marquee.vertical .slide:nth-child(2),
.core-v2-marquee.vertical .slide:nth-child(4) {
	padding-left: var(--space-4);
}

.core-v2-marquee.vertical .slide:nth-child(3),
.core-v2-marquee.vertical .slide:nth-child(5) {
	padding-right: var(--space-4);
}

.core-v2-marquee.vertical .slide.minor {
	width: 100%;
}

.core-v2-marquee.vertical .slide.minor > .inner {
	display: grid;
    grid-template-rows: auto 1fr;
    background-color: var(--white);
	grid-auto-flow: column;
	width: 100%;
	height: 100%;
}

.core-v2-marquee.vertical .slide.minor .slide-top {
	width: 100%;
}

.core-v2-marquee.vertical .slide.minor .content-section {
	position: static;
	padding: var(--space-3);
	width: 100%;
	gap: var(--space-3);
	place-items: start;
}

.core-v2-marquee.vertical .slide.minor .content-section .content-upper {
	gap: var(--space-2);
	margin: 0;
}

.core-v2-marquee.full-width.vertical .major .shared-play-button {
	top: calc(50% - 32px);
	left: calc(50% - 32px);
}

.core-v2-marquee.vertical .slide.minor .slide-footer {
	margin: 0;
}

.core-v2-marquee.marquee-v2-side-by-side .slides .major,
.core-v2-marquee.marquee-v2-side-by-side .slides .minor {
	grid-column: span 2;
}

.core-v2-marquee.marquee-v2-side-by-side .slide.major .content-section .slide-footer a {
	background: transparent;
	padding: 0;
	clip-path: unset;
}

.core-v2-marquee.marquee-v2-side-by-side .slides .minor .content-section {
	padding: var(--space-3) 0;
}

.core-v2-marquee.marquee-v2-side-by-side .slide .content-section .content-upper {
	margin: 0 0 auto;
}

.core-v2-marquee.marquee-v2-side-by-side .slide.major .slide-title,
.core-v2-marquee.marquee-v2-side-by-side .slide.major .content-section, 
.core-v2-marquee.marquee-v2-side-by-side  .slide.major .content-upper,
.core-v2-marquee.marquee-v2-side-by-side .slide.major .slide-footer button {
	color: var(--white);
}

@media (min-width: 40em) {
	.core-v2-marquee.vertical .slides {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.core-v2-marquee.vertical .slide.major {
		grid-column: span 4;
	}

	.core-v2-marquee.vertical .slide.major .slide-top {
		width: calc(70% - 20px);
	}

	.core-v2-marquee.vertical .slide:nth-child(2),
	.core-v2-marquee.vertical .slide:nth-child(4) {
		padding-left: 0;
	}

	.core-v2-marquee.vertical .slide:nth-child(3),
	.core-v2-marquee.vertical .slide:nth-child(5) {
		padding-right: 0;
	}

	.core-v2-marquee.vertical .slide.major .content-section {
		width: 30%;
		height: max-content;
		margin: auto 0;
	}

	.core-v2-marquee.marquee-v2-side-by-side .slides .minor {
		grid-column: span 1;
	}
}

@media (min-width: 64em) {
	.core-v2-marquee.vertical .slides {
		padding: 0 var(--space-2);
		gap: 30px;
	}
	
	.core-v2-marquee.vertical .slide.major {
		padding: 0 var(--space-3);
	}

	.core-v2-marquee.full-width.vertical .major .shared-play-button {
		top: calc(50% - 64px);
		left: 45%;
	}

	.core-v2-marquee.marquee-v2-side-by-side .slides .major {
		grid-column: span 1;
	}
}