img[lazy]{
    transition:opacity .3s ease-in-out;
    opacity:0;
}

img[lazy][loaded]{
    opacity:1;
}
img[lazy][error]{
    background-color:#f5f5f5;
    border:1px dashed #ddd;
}
img[lazy]:not([loaded]):not([error]){
    background-image:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size:200% 100%;
    animation:loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer{
    0%{
        background-position:200% 0;
    }
    100%{
        background-position:-200% 0;
    }
}
@supports (object-fit:cover){
    .lazy-load-image{
        object-fit:cover;
        max-width:100%;
    }
}
.lazy-load-container{
    position:relative;
    overflow:hidden;
}

.lazy-load-container img{
    transition:transform .3s ease;
}

.lazy-load-container img:hover{
    transform:scale(1.02);
}
@media (max-width:768px){
    img[lazy]{
        max-width:100%;
        height:auto;
    }
}
@media (min-resolution:2dppx){
    .lazy-load-image{
        image-rendering:-webkit-optimize-contrast;
        image-rendering:crisp-edges;
    }
}
.placeholder-image{
    background-color:#f8f9fa;
    position:relative;
    min-height:1px;
    min-width:1px;
}

.placeholder-image::before{
    content:"";
    display:block;
    padding-top:75%;
}

.placeholder-image img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.image-load-progress{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:transparent;
    transition:background .3s;
}

.image-load-progress.loaded{
    background:linear-gradient(90deg, #007bff, #0056b3);
}
img{
    will-change:transform;
}
img[lazy]{
    background-color:#f8f9fa;
}