/**
- Gestion des grids en responsive design
- Leo Chaussard
- Version 4.0 du site Catrainz.fr
- Aout 2022
- Version 1.0
**/

/** GRID RESPONSIVE DESIGN -------------------------------------------------------------------------------------------------------------------------------------------------------- **/

/*  SECTIONS  ============================================================================= */

.ct-art-gridsection {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.ct-art-gridgroup:before,
.ct-art-gridgroup:after {
    content:"";
    display:table;
}
.ct-art-gridgroup:after {
    clear:both;
}
.ct-art-gridgroup {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.ct-art-gridcol {
	display: block;
	float:left;
	margin: 0 0.8% 0 0.8%;
	position: relative;
}

/*  Supprimer marge en version mobile 480 pixels */

@media only screen and (max-width : 750px) {
	.ct-art-gridcol {
		margin: 0;
		/* margin: 5px 0; */
	}
}

/*  1 colonnes   ============================================================================= */

.ct-art-1-of-1 {
	width: 100%;
}

/* Version mobile 480 pixels */

@media only screen and (max-width : 750px) {
	.ct-art-1-of-1 {
		width: 100%; 
	}
}

/*  2 colonnes   ============================================================================= */

.ct-art-2-of-2 {
	width: 100%;
}

.ct-art-1-of-2 {
	width: 48.4%;
}

/* Version mobile 480 pixels */

@media only screen and (max-width : 750px) {
	.ct-art-2-of-2 {
		width: 100%; 
	}
	.ct-art-1-of-2 {
		width: 100%; 
	}
}

/*  3 colonnes   ============================================================================= */

	
.ct-art-3-of-3 {
	width: 100%; 
}

.ct-art-2-of-3 {
	width: 66.13%; 
}

.ct-art-1-of-3 {
	/* width: 32.26%;  */
	width: 31.73%;
}


/* Version mobile 480 pixels */

@media only screen and (max-width : 750px) {
	.ct-art-3-of-3 {
		width: 100%; 
	}
	.ct-art-2-of-3 {
		width: 100%; 
	}
	.ct-art-1-of-3 {
		width: 100%;
	}
}

/*  4 colonnes   ============================================================================= */

	
.ct-art-4-of-4 {
	width: 100%; 
}

.ct-art-3-of-4 {
	width: 74.6%; 
}

.ct-art-2-of-4 {
	width: 49.2%; 
}

.ct-art-1-of-4 {
	width: 23.8%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width : 750px) {
	.ct-art-4-of-4 {
		width: 100%; 
	}
	.ct-art-3-of-4 {
		width: 100%; 
	}
	.ct-art-2-of-4 {
		width: 100%; 
	}
	.ct-art-1-of-4 {
		width: 100%; 
	}
}