/* General style */


/* layout */
.masonry-outer,
.masonry { 
	overflow: hidden; 
	}
.masonry { width: calc(100% + 0.375em); }
.masonry > * {
	overflow: hidden;
	padding: 0 0.375em 0 0 !important;
	margin: 0 0 0.375em 0 !important;
	}
.masonry img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 0;
}


/* for posts */
.masonry > article > a {
	position: relative;
	display: block;
	background: rgba(0,0,0, 0.5);
	}
.masonry > article > a > .title {
	display: block;
	width: 100%;
	padding: 0.75em;
	margin-bottom: 0;
	background: rgba(0,0,0, 0.5);
	opacity: 0;
}
.masonry > article > a > img + .title {
	position: absolute;
	left: 0;
	bottom: 0;
}
.masonry > article > a:hover > .title {
	opacity: 1;
}



/* width */
@media screen and (min-width: 1024px)	{ 
	.masonry > * { 
		width: 33.33%;
		} 
	}
@media screen and (max-width: 1024px)	{ 
	.masonry > * { 
		width: 50%;
		} 
	}
@media screen and (max-width: 480px)	{ 
	.masonry > * { 
		width: 100%;
		} 
	}