Diferença entre espaçamento entre vídeo em destaque para vídeos mais vistos

Boa tarde, percebi que há um diferença entre os espaçamentos entre o vídeo em destaque e os vídeos mais assistidos, verificando o código encontrei na classe .cartao--destaque contem um margin-bottom:16px; quando comento esse atributo o espaçamento é corrigido. Não entendo o porque do meu código estar ficando diferente do professor? Também gostaria de saber porque se eu comento a class .cartao--destaque e seu conteúdo a formatação do cartão em destaque desaparece.

CSS

@font-face {
    font-family: 'icones';
    src: url(../font/icones.ttf);
}
body {
    background-color: #1D232A;
    font-family:'Open Sans','icones',sans-serif;
    color: #FFFFFF;
}
.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__notificacao i::before {
    content:"\e906";
    font-size: 24px;
}
.cabecalho__logo {
    width: 40px;
}
.menu-lateral {
    display: flex;
    flex-direction: column;
    background-color: #15191C;
    width: 75vw;
    height: 100vh;
    position:absolute;
    left:-100vw;
    transition:.25s; 
}
.menu-lateral--ativo{
    left:0;
    transition:.25s;
}
.menu-lateral__logo{
    width: 118px;
    align-self: center;
    padding: 16px;
}
.menu-lateral__link{
    height: 64px;
    color: #95999C;
    padding-left: 64px;
    display:flex;
    align-items: center;
}
.menu-lateral__link--ativo{
    color: #FFFFFF;
    padding-left:56px;
    border-left: 8px solid #FFFFFF;
}
.menu-lateral__link::before {
    content:"\e900";
    width:24px;
    height:24px;
    font-size:24px;
    position: absolute;
    left:24px;
}
.menu-lateral__link--inicio::before {
    content: "\e902";
}
.menu-lateral__link--video::before {
    content:"\e90e";
}
.menu-lateral__link--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.5rem;
    font-weight: 700;
}
.titulo-secao {
    font-size: 1,2rem;
    font-weight:700;
}
.cartao {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    background-color: #2C343A;
}
.cartao--destaque{
  margin-bottom: 16px;*Aqui quando eu comento essa propriedade o espaçamento corrige e quando eu comento a classe toda perde toda formatação.*
}
.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;
    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;
}
.secao {
    display: grid;
    gap: 16px;
}

O projeto está no meu github https://github.com/Pkamuy/Dispondo_elementos_com_Flexbox_e_Grid/tree/main/flex-e-grid-main