.ntb-banner {
	--ntb-motion-duration: 1350ms;
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, .06);
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
	line-height: 0;
	direction: ltr;
	isolation: isolate;
}

.ntb-banner__link,
.ntb-banner__slides {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.ntb-banner__slides {
	display: grid;
}

.ntb-banner__image {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	max-width: 100% !important;
	height: auto !important;
	margin: 0;
	border: 0;
	object-fit: contain;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(2.5%, 0, 0) scale(1.065);
	transform-origin: center center;
	filter: brightness(.92) saturate(.9);
	transition:
		opacity var(--ntb-motion-duration) cubic-bezier(.22, 1, .36, 1),
		transform var(--ntb-motion-duration) cubic-bezier(.22, 1, .36, 1),
		filter var(--ntb-motion-duration) ease,
		visibility var(--ntb-motion-duration) linear;
	will-change: opacity, transform;
}

.ntb-banner__image.is-active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0) scale(1);
	filter: brightness(1) saturate(1);
}

@media (prefers-reduced-motion: reduce) {
	.ntb-banner__image {
		transition: none;
		transform: none;
		filter: none;
	}
}

@media (max-width: 782px) {
	.ntb-banner {
		border-radius: 10px;
		box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
	}
}