.stats {
    position: relative;
    overflow: visible;
}

.stats-inner {
    width: 100%;
    background-color: white;
    border-radius: var(--border-radius-box);
    position: relative;
    box-shadow: var(--box-shadow);
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.stat-wrapper {
    width: 50%;
    text-align: center;
    margin: var(--spacing-md) 0;
}

.stat-wrapper:not(:nth-child(odd)) {
    border-left: 2px solid;
}

.stat-number {
    font-size: 2rem;
    font-family: var(--font-em);
    font-weight: 100;
}

.stat-title {
    color: var(--color-highdark);
}

@media screen and (min-width: 700px) {

    .stats-inner {
        transform: translate(-50%, -50%);
        top: -50%;
        margin-left: 50%;
        flex-wrap: nowrap;
    }

    .stat-wrapper {
        width: 25%;
    }

    .stat-wrapper:not(:first-child) {
        border-left: 2px solid;
    }

    .stat-number {
        font-size: 3rem;
    }

}