.row{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.row .column{
	flex: 33.3%;
	width: auto;
	overflow: hidden;
	padding: 0 3px;
	height: 100%;
}
.row .column img{
	margin-top: 2%;
	width: 100%;
	height: 100%;
	cursor: pointer;
	filter: grayscale(1) brightness(0.5);
	border-radius: 5px;
	transition:  0.3s linear;
}
.row .column img:hover{
	filter: grayscale(0) brightness(1);
	transform: scale(1.1);
}

/*make it responsive*/

@media only screen and (max-width: 800px){
	.row .column{
		flex:  50%;
	}
}
@media only screen and (max-width: 600px){
	.row .column{
		flex: 100%;
	}
	.row .column img{
	filter: grayscale(0) brightness(1);
	}
}