.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 {
    --quantidade-maxima-de-colunas: 6;
    --min-largura-maxima-da-coluna: 165px;
    grid-column: 1/3;
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(165px, 100%/6)),1fr)); */
}