.skeleton-card {
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e8eeeb;
    box-shadow: 0 18px 50px -28px rgba(22, 52, 47, 0.28);
}

.skeleton-image {
    aspect-ratio: 3/4;
    background: linear-gradient(
        90deg,
        rgba(31, 41, 39, .04),
        rgba(31, 41, 39, .09),
        rgba(31, 41, 39, .04)
    );
    background-size: 400% 100%;
    animation: skeleton-loading 1.2s infinite;
}

.skeleton-line {
    height: 14px;
    margin: 16px;
    border-radius: 999px;

    background: linear-gradient(
        90deg,
        rgba(31, 41, 39, .04),
        rgba(31, 41, 39, .09),
        rgba(31, 41, 39, .04)
    );

    background-size: 400% 100%;
    animation: skeleton-loading 1.2s infinite;
}

.skeleton-line.small {
    width: 50%;
}

@keyframes skeleton-loading {

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

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

}