@charset "UTF-8";
/* CSS Document */


/********************* FLEX UTILITIES *********************/

/* Display */
.flex { display: flex; } /* Ativa o display flex */

/* Justify-content (alinhamento horizontal) */
.flex--jcc  { justify-content: center; }         /* Centralizado */
.flex--jcfs { justify-content: flex-start; }     /* À esquerda */
.flex--jcfe { justify-content: flex-end; }       /* À direita */
.flex--jcsb { justify-content: space-between; }  /* Espaço entre */
.flex--jcsa { justify-content: space-around; }   /* Espaço ao redor */
.flex--jcse { justify-content: space-evenly; }   /* Espaço uniforme */

/* Flex-direction (direção dos itens) */
.flex--row     { flex-direction: row; }              /* Linha */
.flex--row-rev { flex-direction: row-reverse; }      /* Linha reversa */
.flex--col     { flex-direction: column; }           /* Coluna */
.flex--col-rev { flex-direction: column-reverse; }   /* Coluna reversa */

/* Align-items (alinhamento vertical) */
.flex--aic  { align-items: center; }       /* Centralizado */
.flex--aifs { align-items: flex-start; }   /* Topo */
.flex--aife { align-items: flex-end; }     /* Base */
.flex--ais  { align-items: stretch; }      /* Esticar */

/* Align-self (alinhamento individual) */
.flex--asb  { align-self: baseline; }      /* Linha base */
.flex--asc  { align-self: center; }        /* Centralizado */
.flex--asfs { align-self: flex-start; }    /* Topo */
.flex--asfe { align-self: flex-end; }      /* Base */

/* Flex-wrap (quebra de linha) */
.flex--wrap     { flex-wrap: wrap; }            /* Quebra */
.flex--nowrap   { flex-wrap: nowrap; }          /* Sem quebra */
.flex--wrap-rev { flex-wrap: wrap-reverse; }    /* Quebra reversa */

/* Align-content (alinhamento do container em múltiplas linhas) */
.flex--acc  { align-content: center; }          /* Centralizado */
.flex--acfs { align-content: flex-start; }      /* Topo */
.flex--acfe { align-content: flex-end; }        /* Base */
.flex--acs  { align-content: stretch; }         /* Esticar */
.flex--acsb { align-content: space-between; }   /* Espaço entre */
.flex--acsa { align-content: space-around; }    /* Espaço ao redor */

/* Gap (espaçamento entre itens - múltiplos de 8px) */
.flex--g0 { gap: 0; }       /* Sem espaço */
.flex--g1 { gap: 8px; }     /* 8px */
.flex--g2 { gap: 16px; }    /* 16px */
.flex--g3 { gap: 24px; }    /* 24px */
.flex--g4 { gap: 32px; }    /* 32px */

/* Flex grow / shrink (crescimento e encolhimento) */
.flex--grow     { flex-grow: 1; }        /* Ocupar espaço disponível */
.flex--grow-0   { flex-grow: 0; }        /* Não crescer */
.flex--shrink   { flex-shrink: 1; }      /* Pode encolher */
.flex--shrink-0 { flex-shrink: 0; }      /* Não encolher (ex: imagens) */

/* Basis (tamanho base do item) */
.flex--basis-0    { flex-basis: 0; }       /* Base 0 */
.flex--basis-auto { flex-basis: auto; }    /* Base automática */



/* Calculo do GAP 
flex-basis: calc((100% - (N - 1) * G) / N);
Exemplos:
Você quer 4 colunas

Vai usar gap: 24px

O gap só existe entre os itens, então:

4 colunas → 3 espaços de gap

Total de gap: 3 × 24px = 72px / 4 = 18px 


Nº colunas	Gap	Cálculo correto
2	24px	calc((100% - 24px) / 2)
3	24px	calc((100% - 48px) / 3)
4	24px	calc((100% - 72px) / 4)
5	20px	calc((100% - 80px) / 5)

*/



.flex--aic-1  { align-items: center; }       /* Centralizado */
.flex--aic-2  { align-items: center; }       /* Centralizado */
.flex--aife-1  { align-items: flex-end; } 

@media (max-width: 800px) {
	
.flex--aic-1  { align-items: flex-end;  }       
.flex--aic-2  { align-items: flex-start;  }  	
}



@media (max-width: 500px) {
	
.flex--aife-1  { align-items: center; } 	
}