Não consigo fazer meus grids ficarem do mesmo tamanho

CSS:

@font-face {
    font-family: 'icones';
    src: url("/assets/font/icones.ttf");
}

body {
    background-color:#1D232A;
    font-family: 'Open Sans','icones', sans-serif;
    color: white;
}

.cabecalho{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #15191C;
    padding: 8px 16px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
}

.cabecalho_menu i::before{
    content: "\e904";
    font-size: 24px;
}

.cabecalho_icone{
    width: 40px;
}

.cabecalho_notificacao i::before{
    content: "\e906";
    font-size: 24px;
}

.menu-lateral{
    display: flex;
    flex-direction: column;
    background-color: #15191C;
    /*vw é a largura de view port*/
    width: 75vw;
    height: 100vh;

    position: absolute;
    left: -100vw;
    transition: 0.5s;
}


.menu-lateral--ativo{
    left: 0;
    transition: 0.5s;
}

.menu-lateral_logo{
    /*align-self para alinhar somente a imagem*/
    align-self: center;
    width: 118px;
    padding: 16px;
}

.menu-lateral_link{
    width: 64px;
    color: #95999C;
    padding-Left: 64px;
    display: flex;
    align-items: center;
}

.menu-lateral_link--ativo{
    color: white;
    padding-left: 56px;
    border-left: 8px white solid;
}

.menu-lateral_link::before{
    content: "\e900";
    height:24px;
    width: 24px;
    font-size: 24px;
    position: absolute;
    left: 24px;
}

.menu-lateral_link--inicio::before{
    content: "\e902"
}

.menu-lateral_link--videos::before{
    content: "\e90e" 
}

.menu-lateral_link--inicio--Picos::before{
    content: "\e909"
}

.menu-lateral_link--integrantes::before{
    content: "\e903"
}

.menu-lateral_link--camisas::before{
    content: "\e900"
}

.menu-lateral_link--pinturas::before{
    content: "\e90a"
}

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

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

.titulo-secao {
    font-size: 1.2rem;
    font-weight: 700;
}

.cartao{
    width: 100%;
    border-radius: 15px;
    /*para esconder os testos que passem do cartao use overflow: hidden*/
    overflow: hidden;
    background-color: #2C343A;
}

.cartao-destaque{
    /*nao usamos 32px porque ele é somado com o gap 16+16=32*/
    margin-bottom: 16px;
}

.cartao_conteudo{
    padding: 16px;
    /*display: grid; para fazer com que seja dividido o conteudo*/
    display: grid;
    grid-template-columns: auto 1fr; 
    /*Como usamos o grid para espaçamento use o gap: 8px;  para colocar o espaçamento respeitando o nosso arquivo, use ele no lugar do margin*/
    gap: 8px;
}

.cartao_destaque{
    /*usado para mesclar as celulas do gird-template-clolnas*/
    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;
    cursor: pointer;
    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: 28px;
}

.secao {
    display: grid;
    gap: 16px;
}

Olá William, tudo bem?

O que ocorre é que no <article class="cartao cartao_destaque"> a classe que está sendo utilizada é a cartao_destaque. Já no modelo da aula, a classe aplicada neste ponto do código é a cartao--destaque, com dois hifens ao invés de underline. Com essa divergências, foi aplicado a propriedade grid-column: span 2; nesse article (o que não ocorre no modelo da aula), gerando essa diferença entre os cartões.

Modificando, o código ficará assim:

        <article class="cartao cartao--destaque">

Além disso, notei que o seu código tem muitas diferenças do que quando comparado ao da aula, as classes estão quase todas nomeadas de forma diferente, isso poderá gerar confusões no código.

Recomendo você baixar aqui o código da aula e comparar linha a linha antes de prosseguir com o curso.

Espero ter ajudado, qualquer dúvida fique a vontade para perguntar. Abraços!

obrigada! testou tendo e mesmo problema :(