.badges ul.badge {
    list-style: none;
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: -ms-flex;
    display: flex;
}

.badges ul.badge li {
    flex: 1;
}


.badges .icon {
    height: 5em;
    width: 5em;
    display: flex;
    margin: 0 auto;
    border-radius: 50%;
    border: solid 3px var(--border-color);
}

.badges .icon i {
    height: 1.5em;
    width: 1.5em;
    margin: auto;
}
.badges .icon i path {
    fill: var(--foreground-color);
}


.badges p {
    font-weight: bold;
    padding: 0.5em;
}



@media only screen and (max-width: 600px) {

    .badges ul.badge {
        display: block;
    }

    .badges ul.badge p {
        padding: 0 1em 2em;
    }

}