/**
 * @# Image Masonry
 **/

/* Image grid */
$masonry_gallery_padding: 8px;
.wolf-core-gallery-masonry {
	figure {
		margin: 0;
		padding: 0;
	}

	img {
		backface-visibility: hidden;
		display: block;
		vertical-align: bottom;
		width: 100%;
	}

	/* Padding */
	&.wolf-core-gallery-padding-yes {
		// padding: 5px;
		width: calc(100% + #{$masonry_gallery_padding * 2});
		margin-left: -$masonry_gallery_padding;

		// .wolf-core-img-masonry .wolf-core-img{
		// 	padding: $masonry_gallery_padding;
		// }

		// margin-left: -$masonry_gallery_padding;
		// width: calc(100% + #{$masonry_gallery_padding * 3});

		.wolf-core-img-masonry-outer {
			padding: $masonry_gallery_padding;
		}
	}
}

/* Columns */
.wolf-core-gallery-masonry-columns-1 .wolf-core-img-masonry {
	float: none;
	padding: 0;
	padding-bottom: 10px;
}

/*******************/

/* Image justified */
.wolf-core-gallery-justified {
	overflow: hidden;

	figure {
		margin: 0;
		padding: 0;
	}

	.wolf-core-img-justified {
		position: relative;
		float: left;

		a {
			display: block;
			width: 100%;
		}
	}

	img {
		display: block;
		width: 100%;
		backface-visibility: hidden;
	}

	/* Padding */
	&.wolf-core-gallery-padding-yes {
		.wolf-core-img-justified {
			margin: 5px;
		}
	}
}

@media screen and (min-width: 800px) {
	/* Image gallery columns */
	$columns: 6;
	$width: 100%;
	@for $i from 1 through $columns {
		.wolf-core-gallery-columns-#{$i} {
			.wolf-core-img-masonry {
				float: left;
				width: ($width / $i);
			}
		}
	}
}