/*------------------------------------------------------------------------------*/
/* Main Banner
/*------------------------------------------------------------------------------*/

.MainBanners.Banners-600-800 {

	width: 100%;
	padding-block: 20px;
}
.MainBanners:has(+ .SliderPosition) {
	margin-bottom: 4rem;
}

.MainBanners + .SliderPosition {
	position: absolute;
	top: 100%;
}

.MainBanners::-webkit-scrollbar {
	display: none;
}

.MainBanner.Banner-600-800 {
	--aspect-ratio: 6 / 8 !important;
	align-items: flex-end;
	aspect-ratio: 6 / 8 !important;
	display: flex;
	justify-content: center;
	overflow: hidden;
	/* padding: 2rem; */
	position: relative;
	scroll-snap-align: center;
	z-index: 1;
	border-radius: var(--border-radius-images);
	scroll-snap-align: center;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 4px 12px, rgba(17, 17, 26, 0.1) 0px 8px 12px;
}

.MainBanner.Banner-Dark {
	background-color: var(--color-black-lighter);
}

.MainBanner img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.MainBanner .BannerText .Title,
.MainBanner .BannerText > h1,
.MainBanner .BannerText > h2,
.MainBanner .BannerText > h3 {
	line-height: var(--line-height-heading);
}

.MainBanner .BannerText .Title,
.MainBanner .BannerText > h1 {
	font-size: clamp(var(--font-size-regular), 5vw, calc(var(--font-size-xxlarge) * 1.5));
}

.MainBanner .BannerText > h2 {
	font-size: clamp(var(--font-size-regular), 5vw, var(--font-size-xxlarge));
}

.MainBanner .BannerText > h3 {
	font-size: clamp(var(--font-size-regular), 5vw, var(--font-size-xlarge));
}

.SiteMain .MainBanner {
	border-radius: var(--border-radius-medium);
}

@media screen and (max-width: 800px) {
	.MainBanner {
		--aspect-ratio: 2 / 1;
		--default-margin: 1rem;
	}
}

@media screen and (max-width: 600px) {
	.MainBanners.Banners-600-800 {
		padding-block: 12px;
	}

	.MainBanners:has(+ .SliderPosition) {
		margin-bottom: 2.5rem;
	}
}

/*------------------------------------------------------------------------------*/
/* Main Banner as First Element on Home Page
/*------------------------------------------------------------------------------*/

.HomepageCategory .SiteBody .HomepageTitle + section:has(.MainBanners) {
	margin-top: calc(var(--margin-large) * -1);
	margin-inline: calc(var(--container-page-margin) * -1);
}

.HomepageCategory .SiteBody .HomepageTitle + section .MainBanner {
	border-radius: 0;
}

@media screen and (max-width: 480px) {
	.HomepageCategory .SiteBody .HomepageTitle + section:has(.MainBanner) {
		margin-top: calc(var(--margin) * -1);
	}
}

/*------------------------------------------------------------------------------*/
/* Main Banner Gradient
/*------------------------------------------------------------------------------*/

.MainBanner.ImageGradient-1 {
	--gradient-direction-to: top;
	--gradient-start:  0.5;
}

.MainBanner.ImageGradient-1::before {
	background-image: linear-gradient(
		to var(--gradient-direction-to),
		rgba(0, 0, 0, var(--gradient-start)),
		rgba(0, 0, 0, 0)
	);
	content: '';
	height: 100%;
	inset: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 2;
}

.MainBanner.ImageGradient-1 .BannerText {
	color: var(--color-text-light) !important;
	z-index: 3;
}

.MainBanner.ImageGradient-1 .BannerText a:not(.Button) {
	--color-link: var(--color-text-accent-light);
	--color-link-hover: var(--color-text-accent-light-darker);
	--color-link-active: var(--color-text-accent-light-darker);
}

/*------------------------------------------------------------------------------*/
/* Main Banner Animations
/*------------------------------------------------------------------------------*/

.MainBanners li:not(:first-child) .MainBannerImage {
	opacity: 0;
	transition-duration: 1s;
}

.MainBanners li.IsVisible .MainBannerImage {
	opacity: 1;
}

.MainBanner .BannerText {
	opacity: 0;
	transition-duration: 1s;
}

.MainBanners li.IsVisible .BannerText {
	opacity: 1;
}