.skeleton {
    background-color: #dbdbdb;
    background-image: linear-gradient( 75deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100% );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: -150% 0;
    animation: skeleton-loading 1.5s infinite linear;
    border-radius: 4px;
}

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

.skeleton-base {
    width: 100%;
}

.skeleton-text {
    height: 0.6rem;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
    width: 100%;
}

.skeleton-title {
    height: 1.5rem;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
    width: 70%;
}

.skeleton-img {
    width: 100%;
    height: 200px;
    display: block;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.skeleton-price {
    width: 5rem;
    height: 1.5rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}