.counter-card__wrap {
    perspective: 1000px;
}

.counter-card {
    display: block;
    height: 200px;
    transform-style: preserve-3d;
    transition: transform 0.5s;
    position: relative;
    text-align: center;
    /*pointer-events: none;*/
    /* breaks backend :/ */
}

.counter-card--no-animation {
    transition: none;
}

/* add touch class if needed */
.counter-card__wrap:hover .counter-card {
    transform: rotateY(180deg);
}

.counter-card__front,
.counter-card__back {
    height: 100%;
    width: 100%;

    border-style: solid;
    border-width: 1px;
    border-radius: 4px;

    backface-visibility: hidden;
    padding: 14px;
    position: absolute;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.counter-card__front {
    border-color: var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.counter-card__number {
    font-size: 48px;
    line-height: 58px;
}

.counter-card__divider {
    background-color: var(--border-color);
    border-radius: 2px;
    height: 4px;
    margin: 10px 2rem;
}

.counter-card__back {
    background-color: var(--accent-color);
    color: var(--text-color-accent);
    transform: rotateY(180deg);
    justify-content: space-between;
}

.counter-card__icon {
    font-size: 40px;
    margin: 0 0 15px;
}

.counter-card__text {
    font-size: 18px;
    line-height: 1.62;
    margin: 0;
    word-break: break-word;

    line-clamp: 3;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: 87.48px;
}

@media screen and (min-width: 768px) {
    .counter-card__icon {
        margin: 5px 0 5px;
    }

    .counter-card__text {
        margin: 5px 0;
    }
}