/* Skeleton Wrapper */
.img-skeleton-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f3f4f6;
    border-radius: 4px;
}

/* Shimmer Effect */
.img-skeleton-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.7) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: translateX(-100%);
    animation: skeleton-loading 1.2s infinite;
    z-index: 1;
}

/* Image */
.img-skeleton-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity .35s ease;
    position: relative;
    z-index: 2;
}

/* Loaded State */
.img-skeleton-wrapper.loaded::before {
    display: none;
}

.img-skeleton-wrapper.loaded img {
    opacity: 1;
}

/* Animation */
@keyframes skeleton-loading {
    100% {
        transform: translateX(100%);
    }
}