[Dúvida] Espaçamento entre colunas com a criação das variáveis.

Olá Felipe, tudo bem?

Percebi que o seu código está bastante similar ao da aula, mas identifiquei algumas pequenas coisas que podemos ajustar para garantir o espaçamento e a quantidade correta de colunas nos cartões.

Primeiramente, observei que a ordem de algumas declarações estava de forma diferente, o que pode ter gerado alguma dificuldade de compreensão. Além disso, em algumas linhas, faltavam os parênteses em algumas fórmulas, o que pode causar problemas de sintaxe.

Realizei essas pequenas correções no seu código, e agora ele está funcionando normalmente, resolvendo os problemas de espaçamento e quantidade de colunas. O código ajustado ficou assim:

/* Seção geral */
.secao {
    display: grid;
    align-items: center;
}

/* Seção horizontal com 2 linhas */
.secao-horizontal {
    grid-template-rows: 120px auto;
}

/* Seção vertical com 2 colunas e 2 linhas */
.secao-vertical {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr 2fr;
}

/* Estilos dos cartões (ajustados) */
.secao__cartoes {
    display: grid;
    row-gap: 1rem;
    column-gap: var(--gap-coluna);
    --gap-coluna: 1.25rem;
    --gap-proporcional: var(--gap-coluna) * (var(--quantidade-maxima-coluna) - 1) / var(--quantidade-maxima-coluna);

    /* Largura mínima da coluna */
    --largura-minima-coluna: (100% / 2 - var(--gap-proporcional));

    /* Largura máxima da coluna */
    --max-largura-maxima-coluna: (100% / var(--quantidade-maxima-coluna));
    --largura-maxima-coluna: max(var(--min-largura-maxima-coluna), var(--max-largura-maxima-coluna) - var(--gap-proporcional));

    --minimo: min(var(--largura-minima-coluna), var(--largura-maxima-coluna));

    grid-template-columns: repeat(auto-fit, minmax(var(--minimo), 1fr));
}

/* Estilos dos cartões para seção horizontal */
.secao-horizontal .secao__cartoes {
    --quantidade-maxima-coluna: 3;
    --min-largura-maxima-coluna: 348px;
}

/* Estilos dos cartões para seção vertical */
.secao-vertical .secao__cartoes {
    grid-column: 1/3;
    --quantidade-maxima-coluna: 6;
    --min-largura-maxima-coluna: 165px;
}

Agora, com essas alterações, o espaçamento e a quantidade de colunas devem estar corretos, proporcionando o layout desejado. Se precisar de mais ajuda ou tiver outras dúvidas, estou aqui para ajudar!