.my-card.clonable{
    display: none;
}

.my-card-num{
    position: relative;
    width: 50px !important;
    padding-left: .75rem;
}

@property --n {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.num-counter {
    animation: animate var(--duration) forwards var(--timing, linear);
    counter-reset: num var(--n);
    font-weight: bold;
    font-size: 3rem;
    font-family: sans-serif;
    padding: 2rem;
}
.num-counter::before {
    content: counter(num);
}

@keyframes animate {
    from {
        --n: var(--from);
    }
    to {
        --n: var(--to);
    }
}