.keyFigures {
    position: relative;
}

.keyFigures.bg-color {
    padding-top: 6rem;
}

.keyFigures--center {
    text-align: center;
}

/**
 * Title and intro
 */

.keyFigures--center .keyFigures__intro {
    margin: 0 1em;
}

.keyFigures__intro {
    margin-top: 1em;
}

.keyFigures__list {
    padding-top: 4em;
}

.keyFigures__item + .keyFigures__item {
    margin-top: 0;
}

.keyFigures--icons .keyFigures__item {
    padding-top: 1em;
}

.keyFigures__itemIcon {
    height: 3.6rem;
}

.keyFigures--center .keyFigures__itemIcon {
    left: 0;
    right: 0;
    margin: auto;
}

.keyFigures__item strong {
    color: #000;
}

/**
 * The (js animating) number
 */

.keyFigures__itemNumber {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--primaryColor);
}

.keyFigures__itemNumber span {
    word-break: keep-all;
    display: inline-block;
}

.keyFigures__counter--space {
    margin-right: .3em;
}

.keyFigures__counter + sup {
    font-size: .5em;
    top: -.6em;
    left: -.5em;
}

.keyFigures__blob {
    display: none;
}

@media screen and (min-width: 568px) {
    .keyFigures__intro {
        max-width: 50%;
    }

    .keyFigures--center .keyFigures__intro {
        margin: auto;
    }

    .keyFigures__title span {
        padding-right: 1em;
    }

    /**
     * The key figures in a row (row -> if screen wide enough)
     */

    .keyFigures__item {
        float: left;
        -ms-flex: 1 0 100%;
        flex: 0 0 100%;
    }

    .keyFigures--center .keyFigures__item {
        padding-left: 2rem;
    }

    .keyFigures--icons .keyFigures__item {
        position: relative;
        padding-top: 4.2rem;
    }

    .keyFigures__itemIcon {
        position: absolute;
        top: 0;
    }

    .keyFigures__blob {
        position: absolute;
        display: block;
        top: -100px;
        left: 100%;
        transform: translateX(-200px);
    }
}

@media (min-width: 768px) {
    .keyFigures__item {
        width: 40%;
        flex-basis: 40%;
        margin-right: 5%;
    }
}
