Espaçamento titulo / banner nao está funcionando.

No início da aula o prof. coloca um espaçamento na classe .principal com grid+gap e adiciona uma nova classe .cartao--destaque com margin-bottom. Fiz a mesma coisa no meu código, mas ele não aparece. Não encontrei onde eu errei.

html:

    <main class="princial">
        <h2 class="titulo-pagina">Início</h2>
        <article class="cartao cartao--destaque">
            <img src="/img/banner-mobile_1.png" alt="Banner do cartão" class="cartao__imagem">
            <div class="cartao__conteudo">
                <p class="cartao__destaque">Vídeo em destaque</p>
                <h3 class="cartao__titulo">HZC - Life is... / 2021</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 cartão__botao--play cartao__botao--destaque">Assistir agora</button>
            </div>
        </article>
    </main>

css:

.principal {
    padding: 24px 16px;
    display: grid;
    gap: 16px;
}

.titulo-pagina {
    font-size: 1.5rem;
    font-weight: 700;
}

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

.cartao--destaque {
    margin-bottom: 16px;
}

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