/* reference:https://codepen.io/JCLee/pen/dyPejGV */

@-webkit-keyframes skeletonLoading {
    100% {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@-moz-keyframes skeletonLoading {
    100% {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@-o-keyframes skeletonLoading {
    100% {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@keyframes skeletonLoading {
    100% {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }
}

.small-box.placeholder {
    height: 5rem;
    overflow: hidden;
}

.small-box.placeholder::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-animation: skeletonLoading 2s infinite;
    animation: skeletonLoading 2s infinite;
    content: "";
}

.small-box.placeholder:not(.bg-white)::before {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
}

.small-box.placeholder.bg-white::before {
    background-image: linear-gradient(90deg, rgba(34, 34, 34, 0) 0, rgba(34, 34, 34, 0.5) 60%, rgba(34, 34, 34, 0.2) 20%, rgba(34, 34, 34, 0));
}