/*------------------------------------------------------------------------------*/
/* Featured Banner
/*------------------------------------------------------------------------------*/

.FeaturedBanners > li {
  flex: 1 1 auto;         /* antaa jokaiselle tasaisen tilan ja venymisen */
  display: flex;          /* jotta sisäinen .FeaturedBanner venyy */
}


.FeaturedBanners {
	--gap: var(--grid-list-gutter);
	-ms-overflow-style: none;
	display: grid;
	gap: var(--gap);
	grid-auto-flow: column;
	list-style: none;
	margin-bottom: 0;
	overflow-x: auto;
	padding-block: 20px;
	scroll-snap-type: none;
	scrollbar-width: none;
}
.FeaturedBanners li {
	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;
    border-radius: var(--border-radius-images);
}

.FeaturedBanners + .SliderPosition {
	position: static;
}

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

.FeaturedBanner {
	
	align-items: flex-end;
	
	/*background-color: var(--background-color-shade-1);*/
	    border-radius: var(--border-radius-images) var(--border-radius-images) 0 0 !important;
	flex-direction: column;
	overflow: hidden;
	display: flex;
	/*padding: 5%;*/
	position: relative;
	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;
}


.FeaturedBanner img {
	height: auto;
	object-fit: contain;
	border-radius: var(--border-radius-images) var(--border-radius-images) 0 0 !important;
	width: 100%;
	/* NPE edit */
	padding: 10px;
	margin: 0;
	position: relative !important;
}


.FeaturedBanner .BannerText {
	margin: 0 auto auto 0;
	padding: 10px;
}

.FeaturedBanner.Banner-Dark {
	background-color: var(--color-bg-dark);
}
/*
.FeaturedBanner img {
	border-radius: var(--border-radius-images);
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}
*/
.FeaturedBanner .BannerCoverLink {
	border-radius: var(--border-radius-images) var(--border-radius-images) 0 0 !important;
}

.FeaturedBanner .BannerText .Title,
.FeaturedBanner .BannerText > h1,
.FeaturedBanner .BannerText > h2,
.FeaturedBanner .BannerText > h3 {
	line-height: var(--line-height-heading);
	margin: var(--margin-small) 0;
}

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

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

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

/*@media screen and (max-width: 480px) {
	.FeaturedBanners {
		grid-auto-columns: 85%;
		scroll-snap-type: inline mandatory;
	}
}
	*/
/* Desktop */
@media (min-width: 1025px) {
  .FeaturedBanners.Banners-600-800 { grid-auto-columns: 30% !important; }
  .FeaturedBanners.Banners-600-500 { grid-auto-columns: 30% !important; }
 
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  .FeaturedBanners.Banners-600-800 { grid-auto-columns: 45% !important; }
  .FeaturedBanners.Banners-600-500 { grid-auto-columns: 45% !important; }

}

/* Mobile */
@media (max-width: 600px) {
  .FeaturedBanners.Banners-600-800 { grid-auto-columns: 85% !important; scroll-snap-type: inline mandatory; }
  .FeaturedBanners.Banners-600-500 { grid-auto-columns: 85% !important; scroll-snap-type: inline mandatory; }
  .FeaturedBanners { padding-block: 12px; }

}

/*------------------------------------------------------------------------------*/
/* Featured Banner Gradient
/*------------------------------------------------------------------------------*/

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

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

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

.FeaturedBanner.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);
}