<div class="p-1 bg-neutral-100/80">
    <div class="p-1 text-neutral-900 uppercase font-semibold bg-neutral-200/50 rounded-sm">
        Os melhores dos eventos
    </div>

    <div class="buttons flex justify-center items-center gap-8 m-auto py-5">
        <?php foreach ($hallfame['rankings'] as $tops) : ?>
            <a href="<?= __redirect("preview/{$tops['type']}/") ?><?= $tops['type'] == 'char' ? $tops['name'] : $tops['guild'] ?>" class="preview">
                <div class="text-center p-3 bg-neutral-200/60 border-2 border-neutral-200 rounded-xs text-xs">
                    <p class="text-neutral-900 mb-4"> <?= $tops['title'] ?></p>
                    <p class="p-1 bg-neutral-600 rounded-full text-white"> <?= $tops['type'] == 'char' ? $tops['name'] : $tops['guild'] ?></p>
                    <div class="my-4">
                        <img src="<?= $tops['type'] == 'char' ?  __avatar($tops['imagem']) : __guildmark($tops['imagem']) ?>" class="w-24 h-24 object-contain">
                    </div>
                    <p class="p-1 bg-neutral-600 rounded-full text-white"><?= $tops['score'] ?> <small>(<?= $tops['tag_name'] ?>)</small></p>
                </div>
            </a>
        <?php
        endforeach; ?>
    </div>

</div>
<div class="space-15"></div>