.skeleton {
    --lines: 1;
    --l-h: 20px;
    --l-gap: 10px;
    --g-gap: 15px;
    --c-w: 300px;
    --c-p: 10px;
    --bg: #e2e1eb;
    --c-bg: transparent;
    --shine: rgba(255,255,255, 0.2);
    --t: 2s;
    --c-s: 40px;
    --c-pos: center;
    --rect-h: 80px;
    padding: var(--c-p);
    width: var(--c-w);
    position: relative;
    background: var(--c-bg);
    box-sizing: border-box !important;
    --ln: linear-gradient(#000, #000);
    --circle: radial-gradient(calc(var(--c-s) / 2) calc(var(--c-s) / 2) at 50% 50%,#000 98%,transparent 100%)
}

    .skeleton::after, .skeleton::before {
        content: '';
        position: absolute;
        left: var(--c-p);
        top: var(--c-p);
        width: calc(100% - calc(var(--c-p) * 2));
        height: calc(100% - calc(var(--c-p) * 2))
    }

    .skeleton::before {
        background: var(--bg)
    }

    .skeleton::after {
        background: linear-gradient(to right,transparent 0 20%,var(--shine),transparent 80% 100%) -300% 0/80% 100% no-repeat;
        animation: s var(--t) linear infinite
    }

@keyframes s {
    to {
        background-position: 600% 0
    }
}

.skeleton.no-animate::after {
    animation: none
}

.skeleton.skeleton-line {
    height: calc((var(--l-h) * var(--lines)) + (var(--l-gap) * (var(--lines) - 1)) + var(--c-p) * 2)
}

    .skeleton.skeleton-line::after, .skeleton.skeleton-line::before {
        --m: linear-gradient(#000 0 var(--l-h),transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 0/100% calc(var(--l-h) + var(--l-gap));
        -webkit-mask: var(--m);
        mask: var(--m)
    }

.skeleton.skeleton-circle {
    width: calc(var(--c-s) + var(--c-p) * 2);
    height: calc(var(--c-s) + var(--c-p) * 2)
}

    .skeleton.skeleton-circle::after, .skeleton.skeleton-circle::before {
        --m: var(--circle) 0 50%/var(--c-s) var(--c-s) no-repeat;
        -webkit-mask: var(--m);
        mask: var(--m)
    }

.skeleton.skeleton-circle-line {
    height: calc(var(--c-s) + var(--c-p) * 2)
}

    .skeleton.skeleton-circle-line::after, .skeleton.skeleton-circle-line::before {
        --m: var(--circle) 0 50%/calc(var(--c-s)) calc(var(--c-s)),var(--ln) calc(var(--c-s) + var(--g-gap)) var(--c-pos)/100% var(--l-h);
        -webkit-mask: var(--m);
        mask: var(--m);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

.skeleton.skeleton-circle-multi-line {
    height: calc((var(--l-h) * var(--lines)) + (var(--l-gap) * (var(--lines) - 1)) + var(--c-p) * 2)
}

    .skeleton.skeleton-circle-multi-line::after, .skeleton.skeleton-circle-multi-line::before {
        --m: var(--circle) 0 var(--c-pos)/calc(var(--c-s)) calc(var(--c-s)) no-repeat,linear-gradient(#000 0 var(--l-h), transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) calc(var(--c-s) + var(--g-gap)) 0%/100% calc(var(--l-h) + var(--l-gap)) no-repeat repeat;
        -webkit-mask: var(--m);
        mask: var(--m)
    }

    .skeleton.skeleton-circle-multi-line.adapt-to-circle {
        height: calc(var(--c-s) + var(--c-p) * 2)
    }

        .skeleton.skeleton-circle-multi-line.adapt-to-circle::after, .skeleton.skeleton-circle-multi-line.adapt-to-circle::before {
            -webkit-mask-repeat: no-repeat,no-repeat space;
            mask-repeat: no-repeat,no-repeat space
        }

.skeleton.skeleton-rect {
    height: calc((var(--l-h) * var(--lines)) + (var(--l-gap) * (var(--lines) - 1)) + var(--rect-h) + var(--g-gap) + var(--c-p) * 2)
}

    .skeleton.skeleton-rect::after, .skeleton.skeleton-rect::before {
        --m: var(--ln) 0 0/100% var(--rect-h) no-repeat,repeating-linear-gradient(#000 0 var(--l-h), transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 calc(var(--rect-h) + var(--g-gap))/100% calc(100% - (var(--rect-h) + var(--g-gap))) no-repeat;
        -webkit-mask: var(--m);
        mask: var(--m)
    }

.skeleton.skeleton-chart-line {
    --chart-btm: 40px;
    --chart-h: 200px;
    height: calc(var(--chart-h) + var(--c-p) * 2)
}

    .skeleton.skeleton-chart-line::after, .skeleton.skeleton-chart-line::before {
        --m: var(--ln) 0 100%/100% var(--chart-btm) no-repeat,linear-gradient(to left bottom,transparent 0 49.5%, #000 50% 100%) left 0 bottom var(--chart-btm)/calc((var(--c-w) / 10) * 2) calc(var(--chart-h) / 2) no-repeat,linear-gradient(to right bottom,transparent 0 49.5%, #000 50% 100%) left calc((var(--c-w) / 10) * 2) bottom var(--chart-btm)/calc((var(--c-w) / 10) * 3) calc(var(--chart-h) - var(--chart-btm)) no-repeat,linear-gradient(to left bottom,transparent 0 49.5%, #000 50% 100%) left calc((var(--c-w) / 10) * 5) bottom var(--chart-btm)/calc((var(--c-w) / 10) * 3) calc(var(--chart-h) - var(--chart-btm)) no-repeat,linear-gradient(to right bottom,transparent 0 49.5%, #000 50% 100%) left calc((var(--c-w) / 10) * 8) bottom var(--chart-btm)/calc((var(--c-w) / 10) * 2.5) calc(var(--chart-h) / 2.5) no-repeat;
        -webkit-mask: var(--m);
        mask: var(--m)
    }

.skeleton.skeleton-chart-columns {
    --cols: 5;
    --col-w: 25px;
    --col-gap: 25px;
    --o-l: calc(var(--col-w) + var(--col-gap));
    --chart-h: 200px;
    height: calc(var(--chart-h) + var(--c-p) * 2);
    width: calc(((var(--cols) - 1) * var(--o-l)) + var(--col-w) + var(--c-p) * 2)
}

    .skeleton.skeleton-chart-columns::after, .skeleton.skeleton-chart-columns::before {
        --m: var(--ln) 0 100%/var(--col-w) calc((var(--chart-h) / 10) * 4),var(--ln) calc(var(--o-l)) 100%/var(--col-w) calc((var(--chart-h) / 10) * 3),var(--ln) calc(var(--o-l) * 2) 100%/var(--col-w) calc((var(--chart-h) / 10) * 6),var(--ln) calc(var(--o-l) * 3) 100%/var(--col-w) calc((var(--chart-h) / 10) * 8),var(--ln) calc(var(--o-l) * 4) 100%/var(--col-w) calc((var(--chart-h) / 10) * 2),var(--ln) calc(var(--o-l) * 5) 100%/var(--col-w) calc((var(--chart-h) / 10) * 5),var(--ln) calc(var(--o-l) * 6) 100%/var(--col-w) calc((var(--chart-h) / 10) * 4),var(--ln) calc(var(--o-l) * 7) 100%/var(--col-w) calc((var(--chart-h) / 10) * 9),var(--ln) calc(var(--o-l) * 8) 100%/var(--col-w) calc((var(--chart-h) / 10) * 2),var(--ln) calc(var(--o-l) * 9) 100%/var(--col-w) calc((var(--chart-h) / 10) * 7);
        -webkit-mask: var(--m);
        mask: var(--m);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

.skeleton.skeleton-card-1 {
    --card-h: 150px;
    --g-gap: 30px;
    --c-s: 30px;
    --c-w-o: (var(--c-w) - var(--c-p) * 2);
    height: calc(var(--card-h) + var(--c-p) * 2);
    --r-x: calc((var(--c-w-o) / 4) + var(--g-gap));
    --l-x: calc((var(--c-w-o) / 4) + var(--g-gap) + var(--c-s) + var(--l-gap));
    --l-w: calc((var(--c-w-o) - (var(--c-w-o) / 4 + (var(--g-gap) * 2) + (var(--l-gap) * 2) + var(--c-s) * 2)) / 2)
}

    .skeleton.skeleton-card-1::after, .skeleton.skeleton-card-1::before {
        --m: var(--ln) 0 0/calc(var(--c-w-o) / 4) var(--card-h),var(--ln) calc((var(--c-w-o) / 4) + var(--g-gap)) 0/calc(var(--c-w-o) - ((var(--c-w-o) / 4) + var(--g-gap))) calc(var(--card-h) / 5),var(--ln) calc((var(--c-w-o) / 4) + var(--g-gap)) calc(var(--card-h) / 3)/calc(var(--c-w-o) - ((var(--c-w-o) / 4) + var(--g-gap))) calc(var(--card-h) / 8),var(--ln) calc((var(--c-w-o) / 4) + var(--g-gap)) calc(var(--card-h) / 1.8)/calc(var(--c-w-o) - ((var(--c-w-o) / 4) + var(--g-gap))) calc(var(--card-h) / 8),var(--circle) var(--r-x) 100%/calc(var(--c-s)) calc(var(--c-s)),var(--ln) left var(--l-x) bottom calc((var(--c-s) - (var(--card-h) / 8)) / 2)/var(--l-w) calc(var(--card-h) / 8),var(--circle) calc(var(--l-x) + var(--l-w) + var(--g-gap)) 100%/calc(var(--c-s)) calc(var(--c-s)),var(--ln) left calc(var(--l-x) + var(--l-w) + var(--c-s) + var(--g-gap) + var(--l-gap)) bottom calc((var(--c-s) - (var(--card-h) / 8)) / 2)/var(--l-w) calc(var(--card-h) / 8);
        -webkit-mask: var(--m);
        mask: var(--m);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

.skeleton.skeleton-card-2 {
    --f-l-w: 90%;
    --f-l-h: 25px;
    --f-l-c: var(--bg);
    --s-l-w: 70%;
    --s-l-h: 20px;
    --s-l-c: var(--bg);
    --s-l-m-t: 15px;
    height: calc(var(--f-l-h) + var(--s-l-m-t) + var(--s-l-h) + var(--g-gap) + ((var(--l-h) * var(--lines)) + (var(--l-gap) * (var(--lines) - 1))) + var(--c-p) * 2)
}

    .skeleton.skeleton-card-2::after, .skeleton.skeleton-card-2::before {
        --top: calc(var(--f-l-h) + var(--s-l-m-t) + var(--s-l-h) + var(--g-gap));
        --m: var(--ln) 0 0/var(--f-l-w) var(--f-l-h),var(--ln) 0 calc(var(--f-l-h) + var(--s-l-m-t))/var(--s-l-w) var(--s-l-h),var(--ln) 0 var(--top)/100% var(--l-h),var(--ln) 0 calc(var(--top) + (var(--l-h) + var(--l-gap)))/100% var(--l-h),var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 2))/80% var(--l-h),var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 3))/100% var(--l-h),var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 4))/100% var(--l-h),var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 5))/80% var(--l-h);
        -webkit-mask: var(--m);
        mask: var(--m);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .skeleton.skeleton-card-2::before {
        background: linear-gradient(var(--f-l-c),var(--f-l-c)) 0 0/var(--f-l-w) var(--f-l-h) no-repeat,linear-gradient(var(--s-l-c),var(--s-l-c)) 0 calc(var(--f-l-h) + var(--s-l-m-t))/var(--s-l-w) var(--s-l-h) no-repeat,var(--bg)
    }

.skeleton.skeleton-card-3 {
    --c-w: 100%;
    --c-s: 50px;
    --g-gap: 30px;
    --f-l-w: 200px;
    --f-l-h: 20px;
    --s-l-w: 130px;
    --s-l-h: 10px;
    --l-h: 10px;
    --lines: 3;
    --s-l-m-t: 10px;
    height: calc(var(--l-h) * var(--lines) + var(--l-gap) * (var(--lines) - 1) + var(--g-gap) + var(--c-s) + var(--f-l-h) + var(--s-l-h))
}

    .skeleton.skeleton-card-3::after, .skeleton.skeleton-card-3::before {
        --m: var(--circle) 0 0/var(--c-s) var(--c-s),var(--ln) calc(var(--c-s) + var(--g-gap)) 0/var(--f-l-w) var(--f-l-h),var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--f-l-h) + var(--s-l-m-t))/var(--s-l-w) var(--s-l-h),repeating-linear-gradient(#000 0 var(--l-h), transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 calc(var(--c-s) + var(--g-gap))/100% 100%;
        -webkit-mask: var(--m);
        mask: var(--m);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

.skeleton.skeleton-list {
    --bullet-ratio: 1.4;
    --b: calc(var(--l-h) * var(--bullet-ratio));
    --p: calc((var(--b) - var(--l-h)) / 2);
    height: calc(var(--b) + ((var(--b) + var(--l-gap)) * (var(--lines) - 1)) + var(--c-p) * 2)
}

    .skeleton.skeleton-list::after, .skeleton.skeleton-list::before {
        --m: repeating-linear-gradient(#000 0 var(--b), transparent var(--b) calc(var(--b) + var(--l-gap))) 0 0/var(--b) 100%,repeating-linear-gradient(transparent 0 var(--p), #000 var(--p) calc(var(--p) + var(--l-h)), transparent calc(var(--p) + var(--l-h)) calc(calc(var(--p) * 2 + var(--l-gap) + var(--l-h)))) calc(var(--b) + var(--g-gap)) 0/calc(var(--c-w) - (var(--b) + var(--g-gap))) 100%;
        -webkit-mask: var(--m);
        mask: var(--m);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

.skeleton.skeleton-youtube {
    --g-gap: 10px;
    --rect-h: 150px;
    --c-s: 36px;
    height: calc(var(--rect-h) + var(--g-gap) + var(--l-gap) + (var(--l-h) * 2) + var(--c-p) * 2)
}

    .skeleton.skeleton-youtube::after, .skeleton.skeleton-youtube::before {
        --m: var(--ln) 0 0/100% var(--rect-h),var(--circle) 0 calc(var(--rect-h) + var(--g-gap))/var(--c-s) var(--c-s),var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--rect-h) + var(--g-gap))/calc(((var(--c-w) - var(--c-p) * 2) - (var(--c-s) + var(--g-gap))) * 0.85) var(--l-h),var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--rect-h) + var(--g-gap) + var(--l-h) + var(--l-gap))/calc(((var(--c-w) - var(--c-p) * 2) - (var(--c-s) + var(--g-gap))) * 0.6) var(--l-h);
        -webkit-mask: var(--m);
        mask: var(--m);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

.skeleton.skeleton-image {
    --i-w: 250px;
    height: var(--i-w);
    width: var(--i-w);
    --cw: calc((var(--i-w) - var(--c-p) * 2) / 12);
    --ch: calc(var(--i-w) / 12);
    --c-s: calc(var(--i-w) / 4)
}

    .skeleton.skeleton-image::after, .skeleton.skeleton-image::before {
        --m: linear-gradient(to left top,#000 50%, transparent 50.5%) 0 100%/calc(var(--cw) * 2) calc(var(--ch) * 4),linear-gradient(to right top,#000 50%, transparent 50.5%) calc(var(--cw) * 2) 100%/calc(var(--cw) * 2) calc(var(--ch) * 4),linear-gradient(to left top,#000 50%, transparent 50.5%) calc(var(--cw) * 4) 100%/calc(var(--cw) * 4) calc(var(--ch) * 6),linear-gradient(to right top,#000 50%, transparent 50.5%) calc(var(--cw) * 8) 100%/calc(var(--cw) * 4) calc(var(--ch) * 6),var(--circle) left calc(var(--i-w) / 8) top calc(var(--i-w) / 8)/var(--c-s) var(--c-s);
        -webkit-mask: var(--m);
        mask: var(--m);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }