.umb-user-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -10px;
}

.umb-user-card {
    padding: 10px;
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
}

.umb-user-card:hover,
.umb-user-card:focus {
    outline: none;
    text-decoration: none !important;
}

@media (min-width: 768px) {
    .umb-user-card {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 1200px) {
    .umb-user-card {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}

@media (min-width: 1400px) {
    .umb-user-card {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 1700px) {
    .umb-user-card {
        flex: 0 0 20%;
        max-width: 20%;
    }
}


@media (min-width: 1900px) {
    .umb-user-card {
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }
}

@media (min-width: 2200px) {
    .umb-user-card {
        flex: 0 0 14.28%;
        max-width: 14.28%;
    }
}

.umb-user-card__content {
    position: relative;
    padding: 15px;
    flex: 1 1 auto;
    background-color: @gray-10;
    border: 1px solid @gray-9;
    border-radius: 3px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    max-width: 100%;
}

.umb-user-card__content:hover,
.umb-user-card:focus .umb-user-card__content {
    border-color: @turquoise;
}

.umb-user-card__avatar {
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

.umb-user-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
}

.umb-user-card__name {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2px;
    word-wrap: break-word; 
}

.umb-user-card__checkmark {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}

.umb-user-card:hover .umb-user-card__checkmark,
.umb-user-card__checkmark--visible {
    display: block;
}

.umb-user-card__group {
    font-size: 14px;
    text-align: center;
    margin-bottom: 15px;
}

.umb-user-card__last-login {
    font-size: 13px;
    text-align: center;
    margin-top: auto;
}