.list-characters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;

    .character {
        flex: 5;
        max-width: calc(20% - (4rem / 5));
        min-width: calc(20% - (4rem / 5));
        display: block;

        &-avatar {
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: .5rem;

            img {
                max-height: 100%;
            }
        }

        &.active {
            .card {
                border-color: $success;
            }
        }
    }
}