Descobri um jeito de deixar os cards rente com a imagem acima removendo a margem ou espaço que fica sempre do lado direito de cada card. Isso tanto em telas maiores de desktop ou menores como de android por exemplo. Tudo isso em responsividade. Vejam no abaixo como fazer isso!

Como remover a margem do lado direito da classe populares card usando a classe populares itens

Aqui está os código acrescentado durante o vídeo no arquivo responsivo.css:

@media screen and (min-width: 0)

.populares__itens {
        margin-right: -10px;
    }

@media screen and (min-width: 768)

.populares__itens {
        margin-right: -27px;
    }

@media screen and (min-width: 992)

.populares__itens {
        margin-right: -37px;
    }

@media screen and (min-width: 1200)

.populares__itens {
        margin-right: -27px;
    }

Aqui o código completo:

@media screen and (min-width: 0) {
    .destaques__principal, .destaques__categorias {
        grid-column: 1 / 5;

    }

    .destaques__secundario:nth-child(2) {
        display: none;
        grid-column: none;
        grid-row: none;
    }

    .destaques__secundario:nth-child(3) {
        display: none;
        grid-column: none;
        grid-row: none;
    }

    .destaques__secundario:nth-child(4) {
        display: none;
        grid-column: none;
        grid-row: none;
    }

    .destaques__secundario:nth-child(5) {
        display: none;
        grid-column: none;
        grid-row: none;
    }

    .populares__conteudo {
        flex-direction: column;


    }

    .populares__card {
        grid-template-rows: 150px auto;
        margin-bottom: 3rem;
        width: 100%;

    }

    .populares__itens {
        margin-right: -10px;
    }


}

@media screen and (min-width: 768px) {
    .destaques__principal {
        grid-column: 1 / 4;

    }

    .destaques__secundario:nth-child(2) {
        display: flex;
        grid-column: 4 / 4;
        grid-row: 1 / 1;
    }

    .destaques__secundario:nth-child(3) {
        display: flex;
        grid-column: 4 / 4;
        grid-row: 2 / 2;
    }

    .destaques__secundario:nth-child(4) {
        display: flex;
        grid-column: 4 / 4;
        grid-row: 3 / 3;
    }

    .destaques__secundario:nth-child(5) {
        display: flex;
        grid-column: 3 / 3;
        grid-row: 3 / 3;
    }

    .destaques__categorias {
        grid-column: 1 / 3;
    }

    .populares__card {
        grid-template-rows: 173px auto;
        margin-right: 1rem;
        width: calc(50% - 1rem);
    }

    .populares__conteudo {
        flex-direction: row;

    }


    .populares__card {
        grid-template-rows: 173px auto;
        margin-bottom: 3rem;
        width: calc(50% - 1rem);
    }

    .populares__itens {
        margin-right: -27px;
    }


}


@media screen and (min-width: 992px) {
    .populares__card {
        margin-bottom: 3rem;
        width: calc(33% - 1rem);
    }

    .populares__itens {
        margin-right: -37px;
    }

}

@media screen and (min-width: 1200px) {
    .populares__card {
        margin-bottom: 0;
        width: calc(20% - 1rem);
    }

    .populares__itens {
        margin-right: -27px;
    }


}