/* loader main article */
.card-main-article.loader {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f3f1f1;
    border-radius: 8px;
}

.card-main-img .loading-placeholder {
    width: 100%;
    height: 383px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    border-radius: 8px;
    animation: shimmer 1.5s infinite;
}

.card-main-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

/* end main article loader */

/* loader side article */
.card-side-article.loader {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: none;
    border-radius: 8px;
}

.card-side-img .loading-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    border-radius: 8px;
    animation: shimmer 1.5s infinite;
}

.card-side-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    padding-left: 16px;
}

/* end loader side article */

/* loader all article */
.card-article.loader {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f3f1f1;
    border-radius: 8px;
}

.card-article-img .loading-placeholder {
    width: 406px;
    height: 279px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    border-radius: 8px;
    animation: shimmer 1.5s infinite;
}

.card-article-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
}

/* end loader all article */

.loading-line {
    height: 16px;
    width: 100%;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    border-radius: 4px;
    animation: shimmer 1.5s infinite;
}

.loading-line.short {
    width: 60%;
}

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: 200px 0;
    }
}