.img-lazy-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 100%;
}

.img-lazy-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 37%,
        #f0f0f0 63%
    );
    background-size: 400% 100%;
    animation: img-shimmer 1.4s ease infinite;
    z-index: 1;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}

.img-lazy-wrap.img-loaded::before {
    opacity: 0;
    pointer-events: none;
}

.img-lazy-wrap img {
    opacity: 0;
    transition: opacity 0.4s ease;
    display: block;
    width: 100%;
}

.img-lazy-wrap img.img-loaded {
    opacity: 1;
}

@keyframes img-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
