.visitCounter {
    display: flex;
    gap: 8px;
}

.digit {
    width: 30px;
    height: 50px;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;
     
    color: black;
    font-size: 30px;
    font-family: monospace;


    border-radius: 8px;
}

/* Overlay image */
.digit::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("/images/counter-overlay.png");
    background-size: cover;
    background-position: center;

    pointer-events: none;
}

/* Keep text above overlay */
.digit span {
    position: relative;
    z-index: 1;
}

/* Animation when the digit changes */
.digit.changed span {
    animation: scrollDigit .4s ease;
}

@keyframes scrollDigit {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}