/* # Splide # */

/* ## Slider ## */

.mask-slider {
	margin: 0 auto;
	max-width: 1400px;
}

.mask-slider .splide__arrows {
	display: none;
	font-size: 1.0rem;
}

.mask-slider .splide__arrow {
	background-color: var(--primary);
	bottom: 36px;
	opacity: 1;
	top: unset;
}

@media(min-width: 768px) {
	.mask-slider .splide__arrows {
		display: block;
		font-size: 1.2rem;
	}
	
	.mask-slider .splide__arrow {
		bottom: 50px;
	}
}

@media(min-width: 1200px) {
	.mask-slider .splide__arrows {
		font-size: 1.5rem;
	}
	
	.mask-slider .splide__arrow {
		bottom: 60px;
	}
}

.mask-slider .splide__arrow svg {
	fill: #fff;
}

.mask-slider .splide__arrow--prev {
	left: unset;
	right: 2.5rem;
}

.mask-slider .splide__arrow--next {
	right: calc(1.5rem * 0.5);
}

@media(min-width: 576px) {
	.mask-slider .splide__arrow--prev {
		/* right: calc((100% - var(--container-width)) * 0.5 + 100px); */
		right: 100px;
	}
	
	.mask-slider .splide__arrow--next {
		/* right: calc((100% - var(--container-width)) * 0.5); */
		right: 0;
	}
}

@media(min-width: 768px) {
	.mask-slider .splide__arrow--prev {
	}
	
	.mask-slider .splide__arrow--next {
	}
}

@media(min-width: 992px) {
	.mask-slider .splide__arrow--prev {
	}
	
	.mask-slider .splide__arrow--next {
	}
}

@media(min-width: 1200px) {
	.mask-slider .splide__arrow--prev {
	}
	
	.mask-slider .splide__arrow--next {
	}
}

@media(min-width: 1400px) {
	.mask-slider .splide__arrow--prev {
	}
	
	.mask-slider .splide__arrow--next {
	}
}

.mask-slider.splide .overlay {
	bottom: 0px;
	position: absolute;
	right: 0px;
}

.mask-slider.splide .overlay .title {
	background-color: var(--primary);
	color: #fff;
	font-size: 1.2rem;
	padding: 6px 12px;
	padding-right: calc(1.5rem * 0.5);
	text-transform: uppercase;
}

@media(min-width: 576px) {
	.mask-slider.splide .overlay .title {
		padding-right: calc((100vw - var(--container-width)) * 0.5);
	}
}

@media(min-width: 768px) {
	.mask-slider.splide .overlay .title {
		font-size: 1.7rem;
		padding: 8px 24px;
	}
}

@media(min-width: 992px) {
	.mask-slider.splide .overlay .title {
	}
}

@media(min-width: 1200px) {
	.mask-slider.splide .overlay .title {
		font-size: 2rem;
		padding: 10px 36px;
	}
}

@media(min-width: 1400px) {
	.mask-slider.splide .overlay .title {
	}
}

/* ## Album ## */

.album {
	align-items: start;
	display: inline-grid;
	gap: calc(var(--bs-gutter-x) * 0.25);
	grid-template-columns: 1fr;
}

@media(min-width: 768px) {
	.album {
		gap: calc(var(--bs-gutter-x) * 0.5);
		grid-template-columns: 2fr 3fr;
	}
}

.album .splide__slide {
	position: relative;
}

.album .splide__slide .overlay {
	background-color: #000b;
	bottom: 0;
	color: #fff;
	font-size: 1rem;
	padding: 12px;
	position: absolute;
	width: 100%;
}

.album .thumbnails {
	display: inline-grid;
	gap: calc(var(--bs-gutter-x) * 0.25);
	grid-template-columns: repeat(3, 1fr);
	list-style-type: none;
	margin: 0;
	padding: 0;
}

@media(min-width: 768px) {
	.album .thumbnails {
		gap: calc(var(--bs-gutter-x) * 0.5);
	}
}

.album .thumbnail {
	cursor: pointer;
	display: inline-block;
	transition: opacity 0.3s ease;
}

.album .thumbnail.active {
	opacity: 0.8;
}