/**
 * EK Image Scroller.
 * BEM: .ekfa-imgscroll*
 */

.ekfa-imgscroll {
	--ekfa-imgscroll-x: 0px;
	--ekfa-imgscroll-y: 0px;
	display: flex;
	width: 100%;
}

.ekfa-imgscroll--align-left {
	justify-content: flex-start;
}

.ekfa-imgscroll--align-center {
	justify-content: center;
}

.ekfa-imgscroll--align-right {
	justify-content: flex-end;
}

.ekfa-imgscroll__frame {
	display: block;
	position: relative;
	width: min(100%, var(--ekfa-imgscroll-width, 100%));
	height: var(--ekfa-imgscroll-height, 420px);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-width: var(--ekfa-imgscroll-border-width, 0);
	border-style: var(--ekfa-imgscroll-border-style, solid);
	border-color: var(--ekfa-imgscroll-border-color, currentColor);
	border-radius: var(--ekfa-imgscroll-radius, 0);
	background: transparent;
	line-height: 0;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	contain: layout paint;
}

.ekfa-imgscroll--shadow .ekfa-imgscroll__frame {
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.ekfa-imgscroll__frame:hover,
.ekfa-imgscroll__frame:focus-visible {
	border-color: var(--ekfa-imgscroll-border-hover-color, var(--ekfa-imgscroll-border-color, currentColor));
}

.ekfa-imgscroll__frame:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ekfa-imgscroll__image {
	display: block;
	margin: 0;
	padding: 0;
	transform: translate3d(0, 0, 0);
	transform-origin: top left;
	transition-property: transform;
	transition-duration: var(--ekfa-imgscroll-duration, 3s);
	transition-timing-function: var(--ekfa-imgscroll-easing, ease-in-out);
	transition-delay: 0s;
	will-change: transform;
}

.ekfa-imgscroll--vertical .ekfa-imgscroll__image {
	width: 100%;
	height: auto;
	max-width: 100%;
}

.ekfa-imgscroll--horizontal .ekfa-imgscroll__image {
	width: auto;
	height: 100%;
	max-width: none;
}

.ekfa-imgscroll--both .ekfa-imgscroll__image {
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
}

.ekfa-imgscroll.is-active .ekfa-imgscroll__image {
	transform: translate3d(var(--ekfa-imgscroll-x), var(--ekfa-imgscroll-y), 0);
	transition-delay: var(--ekfa-imgscroll-delay, 0s);
}

.ekfa-imgscroll.is-no-overflow .ekfa-imgscroll__image {
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.ekfa-imgscroll__image,
	.ekfa-imgscroll.is-active .ekfa-imgscroll__image {
		transform: translate3d(0, 0, 0) !important;
		transition: none !important;
		will-change: auto;
	}
}