/* Smooth fade-in transition for the real image */
.real-image {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.real-image.loaded {
    opacity: 1;
}

/* Skeleton Loader */
.skeleton-wrapper {
    display: flex;
    flex-direction: column;
}

.skeleton-image {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: #e0e0e0;
    /*border-radius: 8px;*/
    animation: shimmer 1.5s infinite linear;
}

/* Skeleton Circle (for colors) */
.skeleton-color {
    background: #e0e0e0;
    animation: shimmer 1.5s infinite linear;
}


.skeleton-text {
    width: 100%;
    margin-top: 18px;
    height: 39.19px;
    background: #e0e0e0;
    animation: shimmer 1.5s infinite linear;
}



.skeleton-text-short {
    width: 40%;
    height: 20px;
}

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

.skeleton-image,
.skeleton-text,
.skeleton-color{
    background: linear-gradient(
        90deg,
        #e0e0e0 25%,
        #f5f5f5 50%,
        #e0e0e0 75%
    );
    background-size: 200% 100%;
}

/* Hide real content initially */
.real-content {
    opacity: 0;
    position: absolute;  /* Optionally, remove it from the layout flow */
    transition: opacity 0.3s ease-in-out; /* Smooth transition */
}

.real-content.loaded {
    opacity: 1;
    position: relative; /* Bring it back into the layout flow */
}