: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: 0.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
    }
}