Líderes

O titúlo do tópico é bem auto explicativo, mas para garantir, segue um gif do funcionamento: Segue abaixo instruções para o funcionamento do código

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; }

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.