.skel {
    display: block;
    border-radius: 8px;
}

.skel,
img.catalog-trainer__photo,
img.catalog-card__avatar {
    background: linear-gradient(90deg, var(--c-skeleton) 25%, var(--c-skeleton-shine) 37%, var(--c-skeleton) 63%) 0 0 / 400% 100%;
    animation: skel-shimmer 1.4s ease infinite;
}

.catalog-skeleton {
    pointer-events: none;
}

.skel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.skel-row--meta {
    gap: 16px;
    margin-top: 22px;
}

.skel-row--divided {
    padding-top: 18px;
    border-top: 1px solid var(--c-grey-200);
}

.skel--datebox {
    height: 140px;
    padding: 0;
}

.skel--pill {
    width: 56px;
    height: 28px;
    border-radius: 999px;
}

.skel--wide {
    width: 120px;
}

.skel--title {
    width: 72%;
    height: 24px;
    margin-top: 18px;
}

.skel--title + .skel--title {
    margin-top: 10px;
}

.skel--short {
    width: 45%;
}

.skel--date {
    width: 150px;
    height: 34px;
}

.skel--avatar {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skel--line {
    width: 140px;
    height: 14px;
}

.skel-row .skel--short {
    width: 100px;
}

.skel--button {
    width: 100%;
    height: 48px;
}

.catalog-card__aside .skel--line {
    width: 60%;
}

@keyframes skel-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skel,
.catalog-trainer__photo,
.catalog-card__avatar {
        animation: none;
    }
}