@keyframes loading {
    from { background-position-x: 100%; }
    to { background-position-x: 0%; }
}

.lazy_img {
    width: 178px;
    height: 178px;
    border-radius: 3px;
    object-fit: cover;
    transition: box-shadow 150ms ease-in;
}

.mockup {
    position: absolute;
    width: 178px;
    height: 178px;
    background: linear-gradient(
        -90deg,
        rgb(236, 236, 236) 0%,
        rgb(236, 236, 236) 40%,
        rgb(232, 232, 232) 50%,
        rgb(236, 236, 236) 60%,
        rgb(236, 236, 236) 100%
    );
    background-repeat: repeat;
    background-size: 400% 100%;
    transition: opacity 600ms ease-in;
}

.loading {
    animation: loading 1.5s ease infinite;
}

.fade-out {
    opacity: 0;
}