Bom dia!
Me manda uma mensagem MP, como se trata de um caso especifico, vamos te que testar varias configurações, então fica combinado assim, quando achar a solução, postamos aqui, para quem quiser usar também, ta bom?

Opa depois de quebrar muito a cabeça, eu conseguir colocar de um jeito através do modern acc, com click, seguindo muitos tutoriais, ficou assim:
eu usei uns codigo src com <center> e outras função pra detectar as vocações.

Problema resolvido.

Solução :

Foi trocado a linha do input que puxava somente o nome das vocations, por essa.

 

OBS : Tanto na tela de criação de char, quando na criação de conta foi alterado e posto esse código.

 

                <div class="vocations">
                    {% for key, sample_char in config.character_samples %}
                        <div class="vocation">
                            <input type="radio" class="vocation__radio-item" name="vocation" id="vocation{{ key }}" value="{{ key }}"
                                    {% if vocation is not null and vocation == key %} checked="checked"{% endif %}>
                            <label for="vocation{{ key }}" class="vocation-label">
                                <img class="vocation-label__img" src="{{ config['vocation_images'][key] }}" alt="{{ config['vocations'][key] }}"/>
                                <span class="vocation-label__name">{{ config['vocations'][key] }}</span>
                            </label>
                        </div>
                    {% endfor %}
                </div>

E o código CSS para ficar certinho usado foi esse.
 

 .vocations {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
            .vocation {
                flex: 50%;
                text-align: center;
            }
            .vocation input[type=radio] {
                display: none;
            }
            .vocation__radio-item:checked +.vocation-label .vocation-label__name {
                color: red;
            }
            .vocation-label__img {
                max-width: 100%;
            }
            .vocation-label__name {
                display: block;
                margin-top: 20px;
            }
            .vocation-label:hover .vocation-label__name, .vocation-label:active .vocation-label__name, .vocation-label:focus .vocation-label__name {
                color: red;
            }