.secao {
    display: grid;
    align-items: center;
}

.secao-horizontal {
    grid-template-rows: 120px auto;
}

.secao-vertical { 
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr 2fr;
}

.secao__cartoes {
    display: grid;
    row-gap: 1rem;
    --gap-coluna: 1.25rem;
    column-gap: var(--gap-coluna);
    --gap-proporcional: var(--gap-coluna) * (var(--quantidade-maxima-de-colunas) - 1) / var(--quantidade-maxima-de-colunas);

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

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

    --minimo: min(var(--largura-minima-da-coluna), var(--largura-maxima-da-coluna));
   
   
    grid-template-columns: repeat(auto-fit, minmax(var(--minimo), 1fr));
}


.secao-horizontal .secao__cartoes {
    --quantidade-maxima-de-colunas: 3;
    --min-largura-maxima-da-coluna: 348px;
    /*display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(348px, 100%/3)), 1fr));*/
}

.secao-vertical .secao__cartoes {
    grid-column: 1/3;
    --quantidade-maxima-de-colunas: 6;
    --min-largura-maxima-da-coluna: 165px;
    /*display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(165px, 100%/6)), 1fr));*/
}