:root {
	--vp-lazyload-images__background: linear-gradient(270deg, hsla(0, 0%, 55%, .15), hsla(0, 0%, 55%, .05), hsla(0, 0%, 55%, .05), hsla(0, 0%, 55%, .15));
	--vp-lazyload-images__background-size: 400% 100%;
	--vp-lazyload-images__animation-duration: 7s;
	--vp-lazyload-transition-duration: .3s;
	--vp-lazyload-transition-easing: ease-in-out;
}

img.vp-lazyload, img.vp-lazyloaded, img.vp-lazyloading, img.vp-lazypreload {
	opacity: 0;
	transition: var(--vp-lazyload-transition-duration) opacity;
}

img.vp-lazyloaded {
	opacity: 1;
}

:is(.vp-portfolio__item-img,.vp-portfolio__thumbnail-img):has(img:first-of-type:is(.vp-lazyload,.vp-lazyloading,.vp-lazyloaded)):before {
	background-image: var(--vp-lazyload-images__background);
	background-size: var(--vp-lazyload-images__background-size);
	bottom: 0;
	content: "";
	left: 0;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transition: var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) opacity, var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) visibility;
	visibility: visible;
}

:is(.vp-portfolio__item-img,.vp-portfolio__thumbnail-img):has(img:first-of-type.vp-lazyloading):before {
	animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) ease-in-out infinite;
}

:is(.vp-portfolio__item-img,.vp-portfolio__thumbnail-img):has(img:first-of-type.vp-lazyloaded):before {
	opacity: 0;
	visibility: hidden;
}

@keyframes vp-lazyload-placeholder {
	0% {
		background-position: 200% 0;
	}
	
	to {
		background-position: -200% 0;
	}
}