/* = Mask = */

/* == Carousel / Splide == */

.heroslider {
	margin-bottom: 1rem;
}

@media(min-width: 768px) {
	.heroslider {
		margin-bottom: 0;
	}
}

.heroslider .carousel-item img {
	height: 500px;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* == Contentcarousel == */

.contentcarousel .carousel-indicators {
	position: absolute;
    bottom: -20px;
}

.contentcarousel .carousel-indicators [data-bs-target] {
	background-color: var(--primary);
	border-radius: 50%;
	height: 15px;
	width: 15px;
}

.contentcarousel .frame {
	margin-bottom: 0;
}

.contentcarousel .frame-type-mask_carouselitem {
	background-color: var(--t-grey-light);
	/* color: #fff; */
	display: flex;
	flex-direction: column;
	height: 550px;
	margin-bottom: 30px;
	overflow: hidden;
	padding: 1rem;
}
@media( min-width: 576px) {
	.contentcarousel .frame-type-mask_carouselitem {
		height: 530px;
	}
}
@media( min-width: 768px) {
	.contentcarousel .frame-type-mask_carouselitem {
		height: 620px;
	}
}
@media( min-width: 992px) {
	.contentcarousel .frame-type-mask_carouselitem {
		height: 500px;
	}
}
@media( min-width: 1200px) {
	.contentcarousel .frame-type-mask_carouselitem {
		height: 500px;
	}
}
@media( min-width: 1400px) {
	.contentcarousel .frame-type-mask_carouselitem {
		height: 520px;
	}
}

.contentcarousel .carousel-item .image {
	margin-bottom: 1rem;
}

.contentcarousel .carousel-item .image img {
	/* border: 2px solid #fff; */
}

/* == Box / Event == */

.frame-type-mask_box {
	background-color: var(--t-grey-light);
	display: flex;
	flex-direction: column;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 1rem;
}

.frame-layout-12 .frame-type-mask_box {
	height: unset;
}

.container-wrap .frame-type-mask_box {
	background-color: #fff;
}

.frame-type-mask_box.frame-layout-11 {
	background-color: var(--primary);
	color: #fff;
}

.frame-type-mask_carouselitem h3,
.frame-type-mask_box h3 {
	font-size: 1.5rem;
	margin-bottom: 10px;
}

.frame-type-mask_box .bodytext {
	flex-grow: 1;
}

.frame-type-mask_box.frame-layout-11 a:hover {
	color: #fff;
}

.frame-type-mask_box .subhead {
	border-bottom: 1px solid #fff;
	margin-bottom: 12px;
	padding-bottom: 12px;
}

.frame-type-mask_box.frame-layout-11 .subhead {
	border-color: var(--t-grey-light);
}