/* Skeleton Loaders (No JS Dependency) */
.skeleton {
    background-color: var(--skeleton-color);
    background-image: linear-gradient(90deg, var(--skeleton-color), var(--bg-color), var(--skeleton-color));
    background-size: 200px 100%;
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 1;
    width: 100%;
    height: 1em;
    animation: skeleton-loading 1.5s infinite linear;
}

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

    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton-text {
    height: 1.2rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.skeleton-title {
    height: 2.5rem;
    margin-bottom: 1rem;
    width: 80%;
    border-radius: 4px;
}

.skeleton-img {
    height: 200px;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Hidden when content is loaded by server-side PHP */
.is-loaded .skeleton {
    display: none;
}