/* The Shimmer Animation */
.skeleton {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    border-radius: 4px;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

/* Skeleton Card Specifics */
.skeleton-card {
    pointer-events: none; /* Prevent clicking while loading */
    border: 1px solid #eee !important;
    background: white;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 15px;
}

.skeleton-text {
    height: 20px;
    width: 80%;
    margin: 10px auto;
}

.skeleton-text-short {
    height: 15px;
    width: 50%;
    margin: 0 auto 15px auto;
}