/* 1. Remove o comportamento flutuante do Drupal que joga tudo para o lado */
#block-govbr-views-block-link-s-uteis-block-1 .views-view-grid {
    width: 100% !important;
    display: block !important;
}

/* 2. Centraliza a linha com os ícones na tela inteira */
#block-govbr-views-block-link-s-uteis-block-1 .views-row {
    display: flex !important;
    justify-content: center; /* Centraliza o grupo de ícones perfeitamente */
    gap: 60px;               /* Distância considerável e fixa entre os blocos */
    flex-wrap: nowrap;       /* Impede que os ícones quebrem para a linha de baixo */
    width: 100% !important;
    margin: 0 auto;
}

/* 3. Ajusta a largura das colunas para o texto caber */
#block-govbr-views-block-link-s-uteis-block-1 .views-col {
    float: none !important; 
    width: auto !important; /* Remove os 25% rígidos do Drupal */
}

/* 4. Alinhamento interno de cada ícone + texto */
#block-govbr-views-block-link-s-uteis-block-1 .conteudo-colunas {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 5. FIXA O TAMANHO DO ÍCONE EM 80x80 E ADICIONA A MARGEM */
#block-govbr-views-block-link-s-uteis-block-1 .views-field-field-icone-links,
#block-govbr-views-block-link-s-uteis-block-1 .views-field-field-icone-links .field-content,
#block-govbr-views-block-link-s-uteis-block-1 .views-field-field-icone-links img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
}

#block-govbr-views-block-link-s-uteis-block-1 .views-field-field-icone-links {
    margin-bottom: 15px; /* Distância entre o ícone 80x80 e o texto abaixo */
    display: flex;
    justify-content: center;
    align-items: center;
}

#block-govbr-views-block-link-s-uteis-block-1 .views-field-field-icone-links img {
    display: block;
    object-fit: contain; /* Garante que a imagem se adapte aos 80x80 sem distorcer */
}

/* 6. Mantém o texto em uma única linha */
#block-govbr-views-block-link-s-uteis-block-1 .views-field-field-rotulo-links {
    white-space: nowrap;    /* NÃO deixa o texto quebrar linha de jeito nenhum */
}

#block-govbr-views-block-link-s-uteis-block-1 .views-field-field-rotulo-links a {
    text-decoration: none;
    color: #0056b3;         
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
}

#block-govbr-views-block-link-s-uteis-block-1 .views-field-field-rotulo-links a:hover {
    text-decoration: underline;
}