Texto do Botão não centraliza

Eu não sei o que está errado, já olhei o código do instrutor milhares de vezes mas o texto do meu botão não centraliza

        <div class="cartao__conteudo">
            <p class="cartao__destaque">Video em Destaques</p>
            <h3 class="cartao__titulo">HZC - Título</h3>
            <p class="cartao__perfil">Bruno Lopes</p>
            <p class="cartao__info cartao__info--tempo">33 minutos</p>
            <p class="cartao__info cartao__info--visualizacao">33 visualizações</p>
            <button class="cartao__botao cartao__botao--play cartao__botao--destaque">Assistir Agora</button>
        </div>
    </article>

.cartao { width: 100%; border-radius: 15px; overflow: hidden; background-color:#2C343A; }

.cartao__conteudo { padding: 16px; display: grid; grid-template-columns: auto 1fr; gap: 8px; }

.cartao__destaque { grid-column: span 2; }

.cartao__titulo { font-size: 1.2rem; font-weight: 700; grid-column: span 2; }

.cartao__perfil { color: #95999C; font-size: 0.9rem; grid-column: span 2; }

.cartao__info { display: flex; align-items: center; color: #95999C; }

.cartao__info--tempo::before{ content: "\e90c"; margin-right: 8px; }

.cartao__info--visualizacao::before{ content: "\e90f"; margin-right: 8px; }

.cartao__botao { display: flex; justify-self: center; align-items: center; background-color: #0480DC; width: 40px; height: 40px; border-radius: 10px; font-size: 0.9rem; }

.cartao__botao--play::before { content: "\e90b"; font-size: 24px; }

.cartao__botao--destaque { width: 100%; grid-column: span 2; }

.cartao__botao--destaque::before { margin-right: 8px; }