/**
 * Loop Grid hover image swap — crossfade styles.
 *
 * The companion JS injects a .pp-lghs-hover <img> on top of the Elementor
 * Loop Grid item's featured image. This CSS handles the crossfade on :hover.
 *
 * See pp-custom/includes/loop-grid-hover-swap.php for context.
 */

.pp-lghs-wrap {
	position: relative;
	display: block;
}

.pp-lghs-wrap .pp-lghs-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 150ms ease-in-out;
	pointer-events: none;
}

.pp-lghs-wrap:hover .pp-lghs-hover {
	opacity: 1;
}