.person-image-hover-preview {
	position: fixed;
	z-index: 10000;
	width: clamp(160px, 16vw, 240px);
	aspect-ratio: 4 / 5;
	max-height: min(320px, 55vh);
	overflow: hidden;
	pointer-events: none;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	opacity: 0;
	transform: scale(0.96);
	transform-origin: top left;
	transition: opacity 120ms ease, transform 120ms ease;
}

.person-image-hover-preview.is-visible {
	opacity: 1;
	transform: scale(1);
}

.person-image-hover-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (hover: none), (pointer: coarse) {
	.person-image-hover-preview {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.person-image-hover-preview {
		transition: none;
	}
}