dúvidas no display: grid do .cartao--recente

Bom dia. Parei entre as aulas 6 e 7 do módulo 5 deste curso. Assisti novamente desde o começo para ver se não deixei passar nada. estava tentando alinhar o .cartao__titulo com .cartao__link no topo da sessão .cartao--recente

Não entendi o porque de quando uso grid-template-columns: auto auto; para dizer que são duas colunas de tamanho automático, o meu grid fica com 3 colunas e quando tiro essa opção, ficam duas colunas.

HTML
<article class="cartao cartao--recente">
        <h3 class="cartao__titulo">Videos recentes</h3>
        <a href="#" class="cartao__link">Ver Todos</a>
        <ul class="cartao__lista">
            <li class="cartao__item">
                <img src="assets/img/miniatura_1.png" alt="Thumbnail" class="cartao__item-thumbnail">
                <h4 class="carta__item-titulo">HZC - Love Machine</h4>
                <p class="cartao__item-perfil">Bruno Lopez</p>
            </li>
            <li class="cartao__item">
                <img src="assets/img/miniatura_1.png" alt="Thumbnail" class="cartao__item-thumbnail">
                <h4 class="carta__item-titulo">HZC - Love Machine</h4>
                <p class="cartao__item-perfil">Bruno Lopez</p>
            </li>
            <li class="cartao__item">
                <img src="assets/img/miniatura_1.png" alt="Thumbnail" class="cartao__item-thumbnail">
                <h4 class="carta__item-titulo">HZC - Love Machine</h4>
                <p class="cartao__item-perfil">Bruno Lopez</p>
            </li>
            <li class="cartao__item">
                <img src="assets/img/miniatura_1.png" alt="Thumbnail" class="cartao__item-thumbnail">
                <h4 class="carta__item-titulo">HZC - Love Machine</h4>
                <p class="cartao__item-perfil">Bruno Lopez</p>
            </li>
            <li class="cartao__item">
                <img src="assets/img/miniatura_1.png" alt="Thumbnail" class="cartao__item-thumbnail">
                <h4 class="carta__item-titulo">HZC - Love Machine</h4>
                <p class="cartao__item-perfil">Bruno Lopez</p>
            </li>
        </ul>
    </article>

CSS
.cartao{
    width: 100%;
    border-radius: 15px;
    overflow: hidden; /* serve para tudo que sair da borda seja escondido*/
    background-color: #2C343A;
}

@media screen and (min-width: 1440px){
    .cartao--recente{
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        row-gap: 24px;
        width: 256px;
        padding: 16px;
        box-sizing: border-box;
    }
    .cartao--recente .cartao__titulo{
        grid-column: auto                   ;
    }
    .cartao__link{
        font-size: 0.8rem;
        font-weight: 600;
        color: #0480DC;
        justify-self: flex-end;
    }
    .cartao__lista{
        display: grid;
        row-gap: 16px;
        grid-column: span2;
    }
    .cartao__item{
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
    }
    .cartao__item-thumbnail{
        width: 32px;
        grid-row: span 2;
    }
    .carta__item-titulo{
        font-size: 0.9rem;
        line-height: 1.2rem;
        font-weight: 700;
    }
    .cartao__item-perfil{
        font-size: 0.8rem;
        color: #95999C;
    }
}