[erro] estilização não funciona em parte do código

Não sei o que acontece, já conferi o código várias vezes e não me parece ter nada errado, mas a estilização fonte dos botões na section "tópicos" não muda. O padding também não foi aplicado no título, só funcionou quando adicionei à lista. Alguém pode me ajudar?

Meu código HTML está assim:

<section class="topicos">
                    <h2 class="topicos_titulo">TÓPICOS VISITADOS RECENTEMENTE</h2>
                    <ul class="topicos__lista">
                        <li class="topicos__item">
                            <a clas="topicos__link" href="#">Android</a>
                        </li>
                        <li class="topicos__item">
                            <a clas="topicos__link" href="#">Marketing Digital</a>
                        </li>
                        <li class="topicos__item">
                            <a clas="topicos__link" href="#">Agile</a>
                        </li>
                        <li class="topicos__item">
                            <a clas="topicos__link" href="#">Startups</a>
                        </li>
                        <li class="topicos__item">
                            <a clas="topicos__link" href="#">HTML & CSS</a>
                        </li>
                        <li class="topicos__item">
                            <a clas="topicos__link" href="#">Python</a>
                        </li>
                        <li class="topicos__item">
                            <a clas="topicos__link" href="#">OO</a>
                        </li>
                        <li class="topicos__item">
                            <a clas="topicos__link" href="#">Java</a>
                        </li>
                    </ul>
                </section>

O CSS está assim:

.topicos {
    background: var(--cor-degrade-azul);
    color: var(--cor-branco);
    text-align: center;
    padding: 2em 1.5em;
    border-top: 1em solid var(--cor-branco);;
}

.topicos__titulo {
    text-transform: uppercase;
    font-weight: 300;
}

.topicos__lista {
    display: flex;
    flex-wrap: wrap; /*faz a quebra de linha*/
    justify-content: center;
    text-decoration: none; /*coloquei essa propriedade em todos os itens da lista, pra ver se funcionava em algum, e não funcionou*/
    padding-top: 1.5em;
}

.topicos__item {
    background-color: var(--cor-destaque-laranja);
    padding: 1.5em 1em;
    margin: 0.5em 0.5em;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.topicos__link {
    text-decoration: none;
}

E o resultado é este: