.grid {
  background: none;
  width: 100%;  
  margin: 0 auto;
}

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

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

.grid-item {
	position: relative;
	float: left;
	width: 195px;
	height: 195px;
	background: rgba(0,0,0, .2);
	border: 1px solid rgba(255,255,255, .05);
}

.grid-item--width2 { width: 390px; }
.grid-item--height2 { height: 390px; }

.grid-item--width3 { width: 585px; }
.grid-item--height3 { height: 585px; }

.grid-item--width4 { width: 780px; }
.grid-item--height4 { height: 780px; }

.grid-item a {
	display: block;	
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	
	outline: 0px;
	overflow: hidden;
}

.grid-item a:hover {
	outline: 0px solid #fff;	
}

.grid-item .title {
	position: absolute;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0, .5);
	color: #fff;
	
	background: rgba(0,0,0, 0);
	transition: background 2s ease;
	transform: scale(0);
	border: 0px solid;
}

.grid-item .title h4 {
	position: absolute;
	transition: transform 1s ease;
	transition-delay: .1s;
	transform: translateY(-100%);
}

.grid-item a:hover .title h4 {
	transform: translateY(100%);	
}

.grid-item a:hover .title {
	transform: scale(1);
	background: rgba(0,0,0, .7);
}