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

/*////////////// GRID NATIVO /////////////*/

.grade, .grade div[class^="coluna"] {
	box-sizing: border-box;
	overflow-wrap: break-all;
    word-wrap: break-all;
}

.grade{
	display: grid;
	/* grid-template-columns: repeat(12, auto);*/
	/* grid-template-columns: repeat(12, 8.33%); */
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 0 1em;
	
}
.grade.gap {
	grid-gap: 0.5em 1em;
}
.grade.gap_maior {
	grid-gap: 1em;
}
.grade.sem_gap {
	grid-gap: 0;
}
.grade.gap_menor {
	grid-gap: 0.25em 0.5em;
}
.grade.alinhar_vertical{
	align-items: center;
}

.grade .coluna-1 {
    /* celula padrão */
}

.grade .coluna-2 {
    grid-column: span 2;
}

.grade .coluna-3 {
    grid-column: span 3;
}

.grade .coluna-4 {
    grid-column: span 4;
}

.grade .coluna-5 {
    grid-column: span 5;
}

.grade .coluna-6 {
    grid-column: span 6;
}

.grade .coluna-7 {
    grid-column: span 7;
}

.grade .coluna-8 {
    grid-column: span 8;
}

.grade .coluna-9 {
    grid-column: span 9;
}

.grade .coluna-10 {
    grid-column: span 10;
}

.grade .coluna-11 {
    grid-column: span 11;
}

.grade .coluna-12 {
    grid-column: span 12;
}

.grade .linha-1 {
    /* celula padrão */
}

.grade .linha-2 {
    grid-row: span 2;
}

.grade .linha-3 {
    grid-row: span 3;
}

.grade .linha-4 {
    grid-row: span 4;
}

.grade .linha-5 {
    grid-row: span 5;
}

.grade .linha-6 {
    grid-row: span 6;
}

.grade .linha-7 {
    grid-row: span 7;
}

.grade .linha-8 {
    grid-row: span 8;
}

.grade .linha-9 {
    grid-row: span 9;
}

.grade .linha-10 {
    grid-row: span 10;
}

.grade .linha-11 {
    grid-row: span 11;
}

.grade .linha-12 {
    grid-row: span 12;
}

@media only screen and (max-width: 700px) {
	
	.grade:not(.global) div[class^="coluna"], .grade:not(.global) a[class^="coluna"]{
		grid-column: span 12;
	}
	
	.grade:not(.global) {
		grid-gap: 0.5em 1em;
	}
	
}