@keyframes qt3dc-auto-run {
	from {
		transform: perspective(800px) rotateY(-360deg);
	}

	to {
		transform: perspective(800px) rotateY(0deg);
	}
}

.qt3dc-card-3d {
	position: relative;
	width: var(--qt3dc-width, 920px);
	max-width: 100%;
	height: var(--qt3dc-height, 480px);
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: perspective(var(--qt3dc-runtime-perspective, var(--qt3dc-perspective, 1200px))) rotateY(0deg);
	cursor: grab;
	touch-action: none;
	will-change: transform;
}

.qt3dc-card-3d.is-dragging {
	cursor: grabbing;
}

.qt3dc-card-3d__item {
	position: absolute;
	width: var(--qt3dc-card-width, 260px);
	height: var(--qt3dc-card-height, 360px);
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform-origin: center center;
	transform: translate(-50%, -50%) rotateY(var(--qt3dc-rotate, 0deg)) translateZ(var(--qt3dc-runtime-radius, var(--qt3dc-radius, 320px)));
	transition: box-shadow 200ms ease;
	will-change: transform;
}

.qt3dc-card-3d__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.qt3dc-card-3d__item:hover {
	box-shadow: none;
}

@media (max-width: 767px) {
	.qt3dc-card-3d {
		width: min(var(--qt3dc-mobile-width, 360px), calc(100vw - 32px));
		height: min(var(--qt3dc-mobile-height, 260px), 70vw);
	}

	.qt3dc-card-3d__item {
		width: min(var(--qt3dc-mobile-card-width, 136px), calc(50vw - 28px));
		height: min(var(--qt3dc-mobile-card-height, 170px), calc((50vw - 28px) * 1.25));
	}
}