Oi João, tudo bem?

Desculpa a demora, estou refazendo o curso pra ver se tem alguma questão sem resposta e achei a sua agora.

Tem algumas inconsitências no seu código, como aqui:

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

.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;
}

Dá uma olhada que estão faltando algumas configurações no seu CSS. E você está usando a / errada, veja:

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

Para colocar no CSS você precisa usar a barra invertida \, veja:

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

Essas pequenas coisinhas fazem com que ocorram erros nos seus códigos.

Espero ter ajudado e bons estudos!