Widget:MainPageMenu

       <a href="/index.php/Personagens">

               <img src="https://wiki.gla.com.br/images/a/a8/Personagens_card.png">

Personagens

       </a>

       <a href="/index.php/Missões">

               <img src="https://wiki.gla.com.br/images/0/08/Missoes_card.png">

Missões

       </a>

       <a href="/index.php/Itens">

               <img src="https://wiki.gla.com.br/images/3/39/Itens_card.png">

Itens

       </a>

       <a href="/index.php/Bosses">

               <img src="https://wiki.gla.com.br/images/8/87/Worldboss_card.png">

Bosses

       </a>

       <a href="/index.php/Wanted_Pirates">

               <img src="https://wiki.gla.com.br/images/9/9d/Wantedpirates_card.png">

Wanted Pirates

       </a>

       <a href="/index.php/Baús">

               <img src="https://wiki.gla.com.br/images/a/a9/Conquistas_card.png">

Baús

       </a>

       <a href="/index.php/Passe de Batalha">

               <img src="https://wiki.gla.com.br/images/7/7d/Passe_card.png">

Passe de Batalha

       </a>

       <a href="/index.php/Sistema_de_Boost">

               <img src="https://wiki.gla.com.br/images/5/5b/Sistemadeboost_card.png">

Sistema de Boost

       </a>

<style> /* MENU – sempre 4 colunas até 1280px, depois 3, 2 e 1 coluna */ .home-button-container {

 display: grid;
 /* 4 colunas fixas de até 280px cada */
 grid-template-columns: repeat(4, minmax(0, 280px));
 justify-content: center;   /* centraliza o conjunto de botões */
 gap: 20px;
 padding: 10px;
 box-sizing: border-box;
 margin: 0 auto;            /* garante que o grid não estique além dos 4 botões */
 font-family: "Noto Sans", sans-serif;

}

.home-button-item {

 position: relative;
 overflow: hidden;
 border: 1px solid #bbb;
 border-radius: 12px;
 background: #fff;
 transition: transform 0.2s ease-out,
             box-shadow 0.2s ease-out,
             border-color 0.2s ease-out;
 box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 box-sizing: border-box;
 width: 100%;               /* preenche a coluna até os 280px máximos */
 max-width: 280px;          /* não fica maior que isso */
 margin: 0 auto;            /* centraliza dentro de cada coluna */
 font-family: "Noto Sans", sans-serif;

}

.home-button-item:hover {

 transform: translateY(-3px);
 border-color: #007bff;
 box-shadow: 0 4px 10px rgba(0,0,0,0.12);

}

/* imagens e títulos permanecem iguais */ /* … (o resto do your CSS: links, imagens e titles) … */

/* 3 colunas até 1280px */ @media (max-width: 1280px) {

 .home-button-container {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   max-width: none;
 }

}

/* 2 colunas até 900px */ @media (max-width: 900px) {

 .home-button-container {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }

}

/* 1 coluna até 600px */ @media (max-width: 600px) {

 .home-button-container {
   grid-template-columns: 1fr;
 }

}

</style>