.main-content-container.multi-col {
	width: 100% !important;
}
.main-content-container .photo-container {
	width: 100%;
	display: table;
}	

.main-content-container .photo-container > div {
	display: table-cell;
	padding-right: 10px;
	padding-left: 10px;
	vertical-align: top;
	width: 25%;
	line-height: 130%;
}
.main-content-container .photo-container img {
	width: 100%;
	pointer-events: none;	
}
.photo-caption {
	font-size: 16px;
	text-align: left;
	color: #777;
	background-color: white;
}
.main-content-container .photo-container .invisible-row {
	display: none;
}
.photo-container .item {
	/** 如果s>0，會造成滑鼠在相鄰兩個圖間移動時顯示不自然的相互覆蓋 **/
	/** s值必須在:hover中設定 **/
	transition: transform 0s;
	position: relative;
}
.photo-container .item:hover {
	transform: scale(1.1);
	box-shadow: 0 0 0 12px white, 0px 0px 23px 10px #888;
	transition: transform .2s;
	z-index: 99990;
}

/** For videos **/
.item.video::after {
	content: "";
	width: 56px;
	height: 56px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -10px;
	transform: translateX(-50%) translateY(-50%);
	background-image: url(../images/play-icon.png);
	background-size: contain;
	transition: opacity .3s;
	cursor: pointer;
}
.item.video:hover::after {
	opacity: 1;
}
.item.video:active::after {
	opacity: 0.78;
}


@media screen and (max-width: 677px) {
	.main-content-container .photo-container .invisible-row {
		display: table-row;
		width: 100%;
	}
}