Class não alterou meu HTML | Layouts Responsivos: trabalhando com layouts mobile

Olá a todos! Como está?

Estou com uma dúvida e não consigo encontrar onde está o erro. Estou realizando o curso de Layouts responsivos e uma das classes que eu criei e chamei com o css não está realizando o que deveria! Segue a seguir o ponto em questão.

<!DOCTIPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <title>Home | Apeperia</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
        <link href="css/reset.css" rel="stylesheet">
        <link href="css/base.css" rel="stylesheet">
        <link href="css/cabecalho.css" rel="stylesheet">
        <link href="css/chamada.css" rel="stylesheet">
        <link href="css/destaques.css" rel="stylesheet">
    </head>    
    ....
    ....
    ...
    ..

    <section class="destaques container"> 
    .
    .
    .
    .
                <a href="#" class="=destaques__botao botao">Receber destaques por email</a>
            </section>

parte do CSS:

.destaques__botao   {
    color: var(--vermelho-forte);
    border-color: var(--vermelho-forte);
    margin: 0 auto;
}

Desde já, agradeço! Um bom dia a todos! :D