@keyframes skeleton-sweep {
    from { background-position: 150% 0; }
    to { background-position: -150% 0; }
}

.skeleton-img {
    background-color: rgba(120, 120, 120, 0.14);
    background-image: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 65%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: skeleton-sweep 1.6s ease-in-out infinite;
    transition: background-color 0.3s ease;
}

.skeleton-img.is-loaded {
    animation: none;
    background-image: none;
    background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-img {
        animation: none;
    }
}