.baba-vslider {
	--baba-card-w: 330px;
	--baba-card-h: 173px;
	--baba-card-w-m: 240px;
	--baba-card-h-m: 125px;
	--baba-gap: 16px;
	--baba-radius: 14px;
	--baba-shift: 40px;
	--baba-visible: 4;
	--baba-fit: cover;
	--baba-duration: 30s;
	--baba-padx: calc(var(--baba-shift) + 16px);
	--baba-bleed: calc(var(--baba-shift) + 40px);
	--baba-height: calc(var(--baba-visible) * var(--baba-card-h) + (var(--baba-visible) - 1) * var(--baba-gap));
	position: relative;
	overflow: hidden;
	height: var(--baba-height);
	width: 100%;
	padding: 0 var(--baba-padx);
	box-sizing: border-box;
}

.baba-vslider.is-faded {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
	        mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/*
 * Kafelek na hover wysuwa się w bok, a `overflow: hidden` go ucinał.
 * Tam, gdzie działają maski CSS, tniemy taśmę wyłącznie w pionie,
 * zostawiając w poziomie zapas na wysuw. Starsze przeglądarki
 * zostają przy dotychczasowym zachowaniu.
 */
@supports (mask-size: 100% 100%) or (-webkit-mask-size: 100% 100%) {
	.baba-vslider {
		overflow: visible;
		-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 100%);
		        mask-image: linear-gradient(to bottom, #000 0, #000 100%);
		-webkit-mask-size: calc(100% + var(--baba-bleed) * 2) 100%;
		        mask-size: calc(100% + var(--baba-bleed) * 2) 100%;
		-webkit-mask-position: calc(var(--baba-bleed) * -1) 0;
		        mask-position: calc(var(--baba-bleed) * -1) 0;
		-webkit-mask-repeat: no-repeat;
		        mask-repeat: no-repeat;
	}

	.baba-vslider.is-faded {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
		        mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
	}
}

.baba-vslider__track {
	display: flex;
	flex-direction: column;
	align-items: center;
	will-change: transform;
	animation: baba-vslider-up var(--baba-duration) linear infinite;
}

.baba-vslider--down .baba-vslider__track {
	animation-name: baba-vslider-down;
}

.baba-vslider[data-pause="yes"]:hover .baba-vslider__track,
.baba-vslider[data-pause="yes"]:focus-within .baba-vslider__track {
	animation-play-state: paused;
}

@keyframes baba-vslider-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

@keyframes baba-vslider-down {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}

.baba-vslider__slide {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--baba-card-w);
	height: var(--baba-card-h);
	margin-bottom: var(--baba-gap);
	border-radius: var(--baba-radius);
	overflow: hidden;
	text-decoration: none;
	transform: translateX(0);
	transition: transform .45s cubic-bezier(.22, .61, .36, 1),
	            box-shadow .45s cubic-bezier(.22, .61, .36, 1);
}

.baba-vslider__slide:hover,
.baba-vslider__slide:focus-visible {
	transform: translateX(calc(var(--baba-shift) * -1));
	box-shadow: -12px 14px 34px rgba(0, 0, 0, .18);
	z-index: 2;
	outline: none;
}

.baba-vslider__slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.baba-vslider__slide img,
.baba-vslider__ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--baba-fit);
}

.baba-vslider__ph {
	background: linear-gradient(135deg, #efe7f3, #e7d9ef);
}

.baba-vslider__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 14px 12px;
	font: 600 14px/1.3 inherit;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}

@media (max-width: 767px) {

	.baba-vslider {
		height: auto;
		padding: var(--baba-shift) 0 0;
	}

	@supports (mask-size: 100% 100%) or (-webkit-mask-size: 100% 100%) {
		.baba-vslider {
			/* Taśma jedzie w poziomie – tniemy w poziomie,
			   a w pionie zostawiamy zapas na wysuw kafelka do góry. */
			-webkit-mask-image: linear-gradient(to right, #000 0, #000 100%);
			        mask-image: linear-gradient(to right, #000 0, #000 100%);
			-webkit-mask-size: 100% calc(100% + var(--baba-bleed) * 2);
			        mask-size: 100% calc(100% + var(--baba-bleed) * 2);
			-webkit-mask-position: 0 calc(var(--baba-bleed) * -1);
			        mask-position: 0 calc(var(--baba-bleed) * -1);
		}

		.baba-vslider.is-faded {
			-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
			        mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
		}
	}

	.baba-vslider.is-faded {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
		        mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	}

	.baba-vslider__track {
		flex-direction: row;
		align-items: flex-start;
		width: -webkit-max-content;
		width: max-content;
		animation-name: baba-hslider;
	}

	.baba-vslider--down .baba-vslider__track {
		animation-name: baba-hslider-rev;
	}

	.baba-vslider__slide {
		width: var(--baba-card-w-m);
		height: var(--baba-card-h-m);
		margin-bottom: 0;
		margin-right: var(--baba-gap);
	}

	.baba-vslider__slide:hover,
	.baba-vslider__slide:focus-visible {
		transform: translateY(calc(var(--baba-shift) * -1));
	}

	@keyframes baba-hslider {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}

	@keyframes baba-hslider-rev {
		from { transform: translateX(-50%); }
		to   { transform: translateX(0); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.baba-vslider__track {
		animation: none !important;
	}
	.baba-vslider {
		height: auto;
		overflow: auto;
	}
}

/* Elementor potrafi przyciąć wysuwający się kafelek na poziomie opakowania widgetu. */
.elementor-widget-baba_vslider,
.elementor-widget-baba_vslider > .elementor-widget-container {
	overflow: visible;
}