/* Mobiles */
.xs_grid_3_container {
	display: grid;
	grid-template-columns: 100%;
	grid-gap: 0px;
	padding: 0px;
    background: transparent;
    grid-column-gap: 20px;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
}

.xs_grid_2_container {
	display: grid;
	grid-template-columns: 100%;
	grid-gap: 0px;
	padding: 0px;
    background: transparent;
    grid-column-gap: 20px;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
}


.xs_grid_4_container {
	display: grid;
	grid-template-columns: 100%;
	grid-gap: 0px;
	padding: 0px;
    background: transparent;
    grid-column-gap: 20px;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
}



.xs_grid_4_container > * {
    /*grid-column: 1 / span 2;*/
    display: block;
}

.xs_grid_3_container > * {
    /*grid-column: 1 / span 2;*/
    display: block;
}
.xs_grid_2_container > * {
    /*grid-column: 1 / span 2;*/
    display: block;
}



.xs_grid_gap_20{
    grid-gap: 20px 20px;
}
.xs_grid_gap_40{
    grid-gap: 40px 40px;
}
.xs_grid_gap_60{
    grid-gap: 60px 60px;
}



.xs_grid_gap_column_20{
    grid-column-gap:20px;
}
.xs_grid_gap_column_40{
    grid-column-gap:40px;
}
.xs_grid_gap_column_60{
    grid-column-gap:60px;
}


.xs_grid_gap_row_20{
    grid-row-gap:20px;
}
.xs_grid_gap_row_40{
    grid-row-gap:40px;
}
.xs_grid_gap_row_60{
    grid-row-gap:60px;
}



/*
Small screens (laptops)
*/
@media (min-width: 769px) {
    
	.xs_grid_4_container {
		display: grid;
		grid-template-columns: auto auto;
	}
	.xs_grid_4_container:first-child {
		/*grid-column: 1 / span 2;*/
	}
}

/*
tablets
*/
@media (min-width: 980px) {
    
	.xs_grid_3_container {
		display: grid;
		grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
	}
	.xs_grid_3_container:first-child {
		/*grid-column: 1 / span 2;*/
	}
    
    
	.xs_grid_2_container {
		display: grid;
		grid-template-columns: 50% 50%;
	}
	.xs_grid_2_container:first-child {
		/*grid-column: 1 / span 2;*/
	}
    
    
	.xs_grid_4_container {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
	}
	.xs_grid_4_container:first-child {
		/*grid-column: 1 / span 2;*/
	}
}



/*
desktop y superiores (large screens)
*/
@media (min-width: 1200px) {
    
	.xs_grid_3_container {
		display: grid;
        grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
		box-sizing: border-box;
	}
	.xs_grid_3_container > div {
		/*text-align: center;*/
	}
    
    
	.xs_grid_2_container {
		display: grid;
		grid-template-columns: calc(100%/2) calc(100%/2);
		box-sizing: border-box;
	}
	.xs_grid_2_container:first-child {
		/*grid-column: 1 / span 2;*/
	}
    
	.xs_grid_4_container {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		box-sizing: border-box;
	}
	.xs_grid_4_container:first-child {
		/*grid-column: 1 / span 2;*/
	}
    
}