.ui-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(230, 236, 241, 0.55) 25%, rgba(244, 247, 250, 0.9) 50%, rgba(230, 236, 241, 0.55) 75%);
    background-size: 200% 100%;
    animation: uiSkeletonShimmer 1.2s linear infinite;
    border-radius: 14px;
}

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

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

.works-skeleton {
    display: grid;
    gap: 18px;
    width: 100%;
    min-height: 280px;
}

    .works-skeleton .skeleton-row {
        display: flex;
        align-items: center;
        gap: 18px;
        background: transparent;
    }

    .works-skeleton .skeleton-image,
    .works-skeleton .skeleton-text,
    .works-skeleton .skeleton-button {
        height: 18px;
        border-radius: 12px;
    }

    .works-skeleton .skeleton-image {
        width: 240px;
        height: 160px;
    }

    .works-skeleton .skeleton-text {
        width: 100%;
        height: 16px;
    }

        .works-skeleton .skeleton-text.short {
            width: 40%;
        }

    .works-skeleton .skeleton-button {
        width: 120px;
        height: 42px;
    }

.plans-skeleton {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 22px;
    width: 100%;
    min-height: 260px;
}

    .plans-skeleton .skeleton-card {
        height: 280px;
        border-radius: 24px;
    }

@media (max-width: 992px) {
    .plans-skeleton {
        grid-template-columns: 1fr;
    }

    .works-skeleton .skeleton-row {
        flex-direction: column;
        align-items: stretch;
    }

    .works-skeleton .skeleton-image {
        width: 100%;
        height: 180px;
    }
}