:root {
    --loader-width: auto;
    --loader-height: auto;
    --text-container-width: 400px;
    --text-container-height: auto;
    --line-height: 1.5;
}

.image-skeleton-loader,
.blog-text-skeleton-loader {
    width: var(--loader-width);
    height: var(--loader-height);
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.image-skeleton-loader{
    border-radius: 10px;
}

.blog-text-skeleton-loader {
    line-height: calc(var(--text-container-height) * var(--line-height));
}

@keyframes loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}