xximg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

 Main CSS 
.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
}

	.grid-wrapper > div  img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 5px;
	}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
}

	.grid-wrapper .wide {
		grid-column: span 2;
		display: block;
	}

	.grid-wrapper .tall {
		grid-row: span 2;
		display: block;
	}

	.grid-wrapper .big {
		grid-column: span 2;
		grid-row: span 2;
		display: block;
	}

	/*wide*/
	.grid-wrapper:nth-child(7n+0), .grid-wrapper:nth-child(7n+0) a {
		grid-column: span 2;
	}
	/*tall*/
	.grid-wrapper:nth-child(5n+0), .grid-wrapper:nth-child(5n+0) a {
		grid-row: span 2 !important;
	}
	/*big*/
	.grid-wrapper:nth-child(9n+0), .grid-wrapper:nth-child(9n+0) a {
		grid-column: span 2 !important; 
		grid-row: span 2 !important;
	}




@media only screen and (max-width: 600px) {
	.grid-wrapper {
		display: grid;
		grid-gap: 10px;
		grid-template-columns: repeat(auto-fit, minmax(183px, 1fr));
		grid-auto-rows: 100px;
		grid-auto-flow: dense;
	}
	.lightbox {
		/*top: 50%!important;*/
		
	}
}


.grid {
	margin: 0 auto; /* centered */
}

	/* clear fix */
	.grid:after {
		content: '';
		display: block;
		clear: both;
	}

/* ---- .grid-item ---- */

.grid-item {
	float: left;
	width: 200px;
	height: 150px;
	background: #0D8;
	margin-bottom: 5px;
}

	.grid-item:nth-child(3n+0) {
		background: blue;
		height: 300px;
	}

	.grid-item:nth-child(5n+0) {
		background: yellow;
		width: 404px;
		height: 300px;
	}


	.grid-item a {
		text-decoration: none;
	}

	.grid-item img {
		width: 100%;
		height: 100%;
		object-fit:cover;
	}