{{-- Grid de features do widget (9 botoes) --}}
<div class="row row-cols-2 g-1">
    <div class="col">
        <button type="button" class="btn btn-outline-dark btn-sm w-100 d-flex flex-column align-items-center justify-content-center gap-1 py-2 js-btn-contrast"
                aria-label="Contraste" aria-pressed="false">
            <i class="bi bi-circle-half fs-4" aria-hidden="true"></i>
            <small class="fw-bold" style="font-size: 0.65rem;">Contraste</small>
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-dark btn-sm w-100 d-flex flex-column align-items-center justify-content-center gap-1 py-2 js-btn-highlight-links"
                aria-label="Destacar Links" aria-pressed="false">
            <i class="bi bi-link-45deg fs-4" aria-hidden="true"></i>
            <small class="fw-bold" style="font-size: 0.65rem;">Links</small>
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-dark btn-sm w-100 d-flex flex-column align-items-center justify-content-center gap-1 py-2 js-btn-bigger-text"
                aria-label="Aumentar Texto" aria-pressed="false">
            <i class="bi bi-fonts fs-4" aria-hidden="true"></i>
            <small class="fw-bold" style="font-size: 0.65rem;">Texto</small>
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-dark btn-sm w-100 d-flex flex-column align-items-center justify-content-center gap-1 py-2 js-btn-text-spacing"
                aria-label="Espaçamento Horizontal" aria-pressed="false">
            <i class="bi bi-arrows-expand fs-4" aria-hidden="true"></i>
            <small class="fw-bold" style="font-size: 0.65rem;">Espaço H</small>
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-dark btn-sm w-100 d-flex flex-column align-items-center justify-content-center gap-1 py-2 js-btn-line-height"
                aria-label="Altura da Linha" aria-pressed="false">
            <i class="bi bi-text-paragraph fs-4" aria-hidden="true"></i>
            <small class="fw-bold" style="font-size: 0.65rem;">Espaço V</small>
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-dark btn-sm w-100 d-flex flex-column align-items-center justify-content-center gap-1 py-2 js-btn-reading-guide"
                aria-label="Guia de Leitura" aria-pressed="false">
            <i class="bi bi-eyeglasses fs-4" aria-hidden="true"></i>
            <small class="fw-bold" style="font-size: 0.65rem;">Guia</small>
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-dark btn-sm w-100 d-flex flex-column align-items-center justify-content-center gap-1 py-2 js-btn-dyslexia"
                aria-label="Fonte para Dislexia" aria-pressed="false">
            <i class="bi bi-type fs-4" aria-hidden="true"></i>
            <small class="fw-bold" style="font-size: 0.65rem;">Dislexia</small>
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-dark btn-sm w-100 d-flex flex-column align-items-center justify-content-center gap-1 py-2 js-btn-transitions"
                aria-label="Parar Animações" aria-pressed="false">
            <i class="bi bi-pause-circle fs-4" aria-hidden="true"></i>
            <small class="fw-bold" style="font-size: 0.65rem;">Animar</small>
        </button>
    </div>
    <div class="col">
        <button type="button" class="btn btn-outline-dark btn-sm w-100 d-flex flex-column align-items-center justify-content-center gap-1 py-2 js-btn-vlibras"
                aria-label="Tradutor Libras" aria-pressed="false">
            <i class="bi bi-hand-index-thumb fs-4" aria-hidden="true"></i>
            <small class="fw-bold" style="font-size: 0.65rem;">Libras</small>
        </button>
    </div>
</div>