.img-container:has(.qo-create),
.img-container:has(.qo-create) > div {
	height: auto;
}

.img-container .qo-create .qo-create__phone {
	width: 196px;
	height: auto;
	object-fit: contain;
	top: calc(50% - (196px * 945 / 466) / 2);
	left: 50%;
}

.qo-create {
	--qo-line: rgba(255, 255, 255, 0.08);
	width: 100%;
}

.qo-create__kader {
	position: relative;
	height: 500px;
	overflow: hidden;
	background: #14131a;
	border: 1px solid var(--qo-line);
	border-radius: 11px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.qo-create__stage {
	position: absolute;
	inset: 0;
}

.qo-create .qo-create__phone {
	position: absolute;
	left: 50%;
	top: calc(50% - (196px * 945 / 466) / 2);
	width: 196px;
	height: auto;
	aspect-ratio: 466 / 945;
	margin-left: -98px;
	object-fit: contain;
	transition:
		transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
		filter 0.75s ease;
}

.qo-create__phone.is-front {
	z-index: 3;
	transform: translateY(0) scale(1);
	filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.45));
}

.qo-create__phone.is-left {
	z-index: 1;
	transform: translateX(-40%) translateY(22px) rotate(-6deg) scale(0.78);
	filter: brightness(0.62);
	transition-delay: 0.06s;
}

.qo-create__phone.is-right {
	z-index: 2;
	transform: translateX(40%) translateY(22px) rotate(6deg) scale(0.78);
	filter: brightness(0.62);
}

.qo-create__phone.is-passing {
	z-index: 0;
	animation: qo-create-pass 0.75s ease;
}

@keyframes qo-create-pass {
	0% { opacity: 1; }
	38% { opacity: 0; }
	62% { opacity: 0; }
	100% { opacity: 1; }
}