/*=====================================*/
/*===-----  HIGHLIGHTS WIDGET  -----===*/
/*=====================================*/

.highlights {
	--font-title: var(--font-display);
	--text-color: var(--white);
	--square-img-padding: 100%;
	--long-img-padding: 42.67%;
	--full-width-padding: 33%;
    --grid-gap: var(--space-3);

	margin: var(--grid-gap) 0 80px 0;
}

.contentRender_name_plugins_collections_template_custom_highlights + .contentRender_name_plugins_collections_template_custom_highlights .highlights {
	margin-top: -70px;
}

.content .contentRender_name_plugins_collections_template_custom_highlights:last-child .highlights {
	margin-bottom: var(--grid-gap);
}

.highlights .slides {
	display: grid;
	gap: var(--grid-gap);
}

.highlights .slide .inner {
	position: relative;
}

.highlights .slide .img-cont {
	position: relative;
	z-index: 1;
	padding-bottom: var(--long-img-padding);
	overflow: hidden;
}

.highlights .slide .img-cont::before,
.highlights .slide .img-cont::after {
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: block;
	content: '';
	pointer-events: none;
}

.highlights .slide .img-cont::before {
	backdrop-filter: blur(10px);
	opacity:0;
	transition: opacity var(--long-transition-speed-and-ease);
}

.highlights .slide .img-cont::after {
	background: rgba(0,0,0,0.3);
}

.highlights .slide .img-cont > a,
.highlights .slide .highlight-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.highlights .slide .highlight-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: transform var(--long-transition-speed-and-ease);
}

.highlights .shared-play-button {
    left: auto;
    top: var(--space-3);
    right: var(--space-3);
    width: var(--space-10);
    height: var(--space-10);
    font-size: var(--text-sm);
    transform: none;
}

.highlights .slide .content-section {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--space-8);
	pointer-events: none;
}

.highlights .slide .slide-title {
	font-family: var(--font-title);
	font-weight: normal;
	font-size: 2.5rem;
	text-transform: uppercase;
	color: var(--text-color);
	letter-spacing: .06em;
	line-height: var(--leading-none);
	text-align: center;
}

@media (hover: hover) {
	.highlights .slide:hover .img-cont img {
		transform: scale(1.1);
	}

	.highlights .slide:hover .img-cont::before {
		opacity: 1;
	}
}

@media screen and (min-width: 40em) {
	.highlights .slides {
		grid-template: auto / 1fr 1fr;
	}

	.highlights .slide:first-child {
		grid-column: span 2;
	}

	.highlights .slide .img-cont {
		padding-bottom: var(--square-img-padding);
	}
	
	.highlights .slide:first-child .img-cont {
		padding-bottom: var(--long-img-padding);
	}

    .highlights .shared-play-button {
        width: var(--space-12);
        height: var(--space-12);
        font-size: var(--text-lg);
    }

	.highlights .slides[data-slides-number="2"] .slide:last-child,
	.highlights .slides[data-slides-number="4"] .slide:last-child,
	.highlights .slides[data-slides-number="6"] .slide:last-child,
	.highlights .slides[data-slides-number="8"] .slide:last-child,
	.highlights .slides[data-slides-number="10"] .slide:last-child,
	.highlights .slides[data-slides-number="12"] .slide:last-child {
		grid-column: span 2;
	}

	.highlights .slides[data-slides-number="2"] .slide:last-child .img-cont,
	.highlights .slides[data-slides-number="4"] .slide:last-child .img-cont,
	.highlights .slides[data-slides-number="6"] .slide:last-child .img-cont,
	.highlights .slides[data-slides-number="8"] .slide:last-child .img-cont,
	.highlights .slides[data-slides-number="10"] .slide:last-child .img-cont,
	.highlights .slides[data-slides-number="12"] .slide:last-child .img-cont {
		padding-bottom: var(--long-img-padding);
	}
}

@media screen and (min-width: 64em) {
    .highlights {
        --long-img-padding: 54.34%
    }

	.highlights .slides {
		grid-template: auto / 1fr 1fr 1fr 1fr 1fr 1fr;
	}

	.highlights .slide {
		grid-column: span 2;
	}

    .highlights .slide:first-child .img-cont {
		padding-bottom: var(--square-img-padding);
    }

	.highlights .slide:nth-last-child(2),
	.highlights .slide:last-child {
		grid-column: span 3;
	}

	.highlights .slides[data-slides-number="4"] .slide:first-child {
		grid-column: span 6;
	}
	.highlights .slides[data-slides-number="4"] .slide:first-child .img-cont {
		padding-bottom: var(--full-width-padding);
	}
	.highlights .slides[data-slides-number="4"] .slide:not(:first-child) {
		grid-column: span 2;
	}
	.highlights .slides[data-slides-number="4"] .slide:not(:first-child) .img-cont {
		padding-bottom: var(--square-img-padding);
	}

	.highlights .slides[data-slides-number="6"] .slide {
		grid-column: span 2;
	}
	.highlights .slides[data-slides-number="6"] .slide .inner .img-cont {
		padding-bottom: var(--square-img-padding);
	}

	.highlights .slides[data-slides-number="2"] .slide:last-child,
	.highlights .slides[data-slides-number="8"] .slide:last-child,
	.highlights .slides[data-slides-number="10"] .slide:last-child,
	.highlights .slides[data-slides-number="12"] .slide:last-child {
		grid-column: span 3;
	}
	.highlights .slides[data-slides-number="2"] .slide:last-child .img-cont,
	.highlights .slides[data-slides-number="8"] .slide:last-child .img-cont,
	.highlights .slides[data-slides-number="10"] .slide:last-child .img-cont,
	.highlights .slides[data-slides-number="12"] .slide:last-child .img-cont {
		padding-bottom: var(--long-img-padding);
	}

	.highlights .slide:nth-last-child(2) .img-cont,
	.highlights .slide:last-child .img-cont {
		padding-bottom: var(--long-img-padding);
	}

    .highlights .shared-play-button {
        top: var(--space-4);
        right: var(--space-4);
        width: var(--space-16);
        height: var(--space-16);
        font-size: var(--text-2xl);
    }
}

/** alternate version **/

@media (min-width: 40em) {
	.highlights.alternate .slides {
		grid-template: 1fr / 1fr 1fr;
	}

	.highlights.alternate .slides .slide.first-child,
	.highlights.alternate .slides .slide.last-child.full-width {
		grid-column: span 2;
	}

	.highlights.alternate .slides .slide.last-child.full-width .img-cont {
		padding-bottom: 42.5%;
	}
}

@media (min-width: 64em) {
	.highlights.alternate .slides {
		grid-template: 390px 390px auto / repeat(6, 1fr);
	}

	.highlights.alternate .slides .slide.first-child {
		grid-row: 1 / 3;
		grid-column: 1 / 4;
		height: 100%;
	}

	.highlights.alternate .slides .slide:nth-child(2) {
		grid-row: 1 / 2;
		grid-column: 4 / 7;
	}

	.highlights.alternate .slides .slide:nth-child(3) {
		grid-row: 2 / 3;
		grid-column: 4 / 7;
	}

	.highlights.alternate .slides.large-image-side-right .slide.first-child {
		grid-row: 1 / 3;
		grid-column: 4 / 7;
	}

	.highlights.alternate .slides.large-image-side-right .slide:nth-child(2) {
		grid-row: 1 / 2;
		grid-column: 1 / 4;
	}

	.highlights.alternate .slides.large-image-side-right .slide:nth-child(3) {
		grid-row: 2 / 3;
		grid-column: 1 / 4;
	}

	.highlights.alternate .slides .slide:nth-child(3) ~ .slide {
		grid-column: span 2;
	}

	.highlights.alternate .slides .slide:nth-child(3) ~ .slide .img-cont {
		padding-bottom: var(--square-img-padding);
	}

	.highlights.alternate .slides .slide:first-child .img-cont,
	.highlights.alternate .slides .slide:nth-child(2) .img-cont,
	.highlights.alternate .slides .slide:nth-child(3) .img-cont {
		padding: 0;
		height: 100%;
	}

	.highlights.alternate .slides .slide:first-child .inner,
	.highlights.alternate .slides .slide:nth-child(2) .inner,
	.highlights.alternate .slides .slide:nth-child(3) .inner {
		height: 100%;
	}
} 

@media (min-width: 90em) {
	.highlights.alternate .slides {
		grid-template: 515px 515px auto / repeat(6, 1fr);
	}
}