/* ************************************************************************************************************************************ */
/* -------------------------------------- (C) Copyright 2018/2019 by machtWeb | Reinhard Lange ---------------------------------------- */
/* ------------------------------------------------- machtWeb.de | imail@machtWeb.de -------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------	*/
/* update	->																											5.00/00	- 03-04-19
/* layout	-> common																													*/
/* file 	-> design/gallery.css																										*/
/* colors	-> http://www.color-hex.com																									*/
/* convert	-> http://px2em.ixcms.de | http://16to9.ixcms.de | http://4to3.ixcms.de														*/
/* ------------------------------------------------------------------------------------------------------------------------------------	*/
/* info		-> css-variables																											*/
/*			-> caniuse.com/#search=variables																							*/
/* -------------------------------------------------------------------------------------------------------------------- 5.00/00	- 03-04-19
			-> https://codepen.io/apollo55/pen/eopqrN
/* ------------------------------------------------------------------------------------------------------------------------------------	*/
* { margin: 0; padding: 0; box-sizing: border-box; }

.img_main { 
	max-width: 80em;	
	margin:0 auto;	
	}
.img_container { 
	display:grid; 
	grid-template-columns:repeat(6, 1fr); 
	grid-gap: .5em; 
	margin: .4em 1.9em;
	}
.item img { 
	width:100%; 
	height:100%; 
	object-fit:cover;
	padding: 4px;
	border: 1px solid #ccc;
	border-width: 1px 2px 2px 1px;
	}
.item:nth-child(1) { 
	grid-column:span 4; 
	grid-row:span 2; 
	}
.item:nth-child(2), .item:nth-child(3) { 
	grid-column:span 2; 
	}
.item:nth-child(4), .item:nth-child(5) { 
	grid-column:span 3; 
	}
@media screen and (max-width: 40em){
	.img_container {display:block;}
	.item {margin-bottom: .5em;}
}
/* ------------------------------------------------------------------------------------------------------------------------------------ */