/* CSS Document */
/* Mobile First */



/* ......... Grid Columns ...............*/



/* ----------------  X2 ----------------- */
/* Not on AFY website */
/* Article compatibility to be written */

@media (min-width: 640px) {
	.X2 {
		display: grid;
		grid-template-columns: 1fr 1fr ;
		grid-row-gap: 0em;
		grid-column-gap: 3%;
		}
	.X2 > *:not(div),
	.X2 > div.Quadruple {
		grid-column-start: span 2;
		}	
		
	.X2 > div	 {
		grid-column-start: span 1;
		}
		}





/* ----------------  X4 ----------------- */
 

@media (min-width: 640px) {
	.X4 {
		display: grid;
		grid-template-columns: 1fr 1fr ;
		grid-row-gap: 0em;
		grid-column-gap: 3%;
		}
	.X4 > *:not(div),
	.X4 > div.Quadruple {
		grid-column-start: span 2;
		}
	.X4 > div.Double,
	.X4 > div.Tripple  {
		grid-column-start: span 1;
		}	
		}
		
		

		
@media (min-width: 1180px) {
	.X4 {
		grid-template-columns: repeat(4, 22.75%);
		}
	.X4 > *:not(div),
	.X4 > div.Quadruple {
		grid-column-start: span 4;
		}
	.X4 > div.Tripple {
		grid-column-start: span 3;
		}
	.X4 > div.Double	 {
		grid-column-start: span 2;
		}
	.X4 > div	 {
		grid-column-start: span 1;
		}
		}


/* Double X2 */
/* Not on AFY website */


@media (max-width: 1024px) {
	/* space bewwen blocks */
	.X4 .Double.X2 > div:nth-of-type(n+2) h3:nth-child(1),
	.X4 .Double.X2 > div:nth-of-type(n+2) h4:nth-child(1) {
		margin-top: 1.5em;
		}
		}


@media (min-width: 1024px) {
	.X4 .Double.X2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-row-gap: 0em;
		grid-column-gap: 2em;
		align-content: start;
		}
	.X4 .Double.X2 > div {
		grid-column-start: span 1;
		align-self: start;
		}
	.X4 .Double.X2 > *:not(div) {
			grid-column-start: span 2;
			}
			}






 
/* ----------------  X4 + Article ----------------- */
 
 
 

.X4.Article {
		display: grid;
		grid-column-gap: 2em;
		align-content: start;
		} 
 
 
@media (min-width: 640px){
	.X4.Article {
		grid-row-gap: 4em;
		grid-template-columns: 1fr 1fr;
		grid-column-start: span 2;
		}
	.X4.Article > div {
		position: relative;
		}
	
	/* dividers */
	.X4.Article > div:nth-of-type(odd)::before {
		content: "";
		position: absolute;
	 	display: block;
		width: calc(200% + 2em);
		height: 1px;
		background-color: #d0d0ce; /* Them 30% */
		bottom: -2em;
		left: 0;
		height: 1px;
	 	}
	
	.X4.Article > div:nth-of-type(odd)::before {
		 	content: "";
		 	position: absolute;
		  	display: block;
		 	width: calc(200% + 2em);
		 	height: 1px;
		 	background-color: #d0d0ce; /* Them 30% */
		 	bottom: -2em;
		 	left: 0;
		 	height: 1px;
		  	}
	
	.X4.Article > div:nth-last-of-type(-n+2)::before {
			background-color: transparent;
			}
			}		
 
 
@media (min-width: 1180px) {
	.X4.Article {
		grid-column-start: span 4;
		}
	 
	.X4.Article > div {
	 	display: grid;
		grid-row-gap: 4em;
		grid-column-gap: 2em;
		align-content: start;
		grid-template-columns: 1fr 1fr;
	 	}
	.X4.Article > div:nth-of-type(2n+1)::before {
		content: "";
		position: absolute;
		display: block;
		width: calc(200% + 2em);
		height: 1px;
		background-color: #d0d0ce; /* Them 30% */
		bottom: -2em;
		}
		.X4.Article > div:nth-last-of-type(-n+2)::before {
		 	background-color: transparent;
		 	}
		  	}
 

	 /* Heads margin*/
	 @media (max-width: 639px) {
	 	.Article > div:nth-of-type(1) > div:nth-child(2) h3,
	 	.Article > div:nth-of-type(n+2) h3,	
	 	.Article > div:nth-of-type(1) > div:nth-child(2) h4,
	 	.Article > div:nth-of-type(n+2) h4 {
	 		margin-top: 1em;
	 		}
	 		}
	 
	 @media (min-width: 640px) and (max-width:1199px) {
	 	.Article > div > div:nth-child(2) h3,
	 	.Article >  div > div:nth-child(2) h4{
	 		margin-top: 1em;
	 		}
	 		}
	 	 
	 
	 

/* ----------------  X6 ----------------- */


.X6 {
	display: flex;
	flex-wrap: wrap;
	/*align-items: flex-start;*/
	position: relative;
	}




 .X6 {
 	justify-content: Center;
 	}

	.X6 > div {
		width: 46%;
		/*min-width: 130px;
		max-width: 225px;*/
		}
	.X6 > div.Double {
		width: 100%;
		max-width: 550px;
		}
	.X6 > div.Tripple {
		width: 100%;
		max-width: 1100px;
		}



	@media (min-width: 480px) { /* X3*/
 		.X6 > div {
 			width: 33%;
 			}
 		.X6 > div.Double {
 			width: 66%;
			}
 		.X6 > div.Tripple {
 			width: 100%;
 			}
 			}


	@media (min-width: 640px) { /* X4 */
 		.X6 > div {
 			width: 25%;
 			}
 		.X6 > div.Double {
 			width: 50%;
			}
 		.X6 > div.Tripple {
 			width: 75%;
 			}
 			}



	@media (min-width: 800px) { /* X5 */
 		.X6 > div {
 			width: 20%;
 			}
 		.X6 > div.Double {
 			width: 40%;
			}
 		.X6 > div.Tripple {
 			width: 60%;
 			}
 			}

	@media (min-width: 1024px) { /* x 6 */
 		.X6 > div {
 			width: 16%px;
 			}
 		.X6 > div.Double {
 			width: 32%;
			}
 		.X6 > div.Tripple {
 			width: 48%;
 			}
 			}


	@media (min-width: 1200px) { /* FIX Width */
 		.X6 > div {
 			width: 220px;
 			}
 		.X6 > div.Double {
 			width: 440%;
			}
 		.X6 > div.Tripple {
 			width: 660%;
 			}
 			}