/**
 * @# Image Metro
 **/
.wolf-core-img-mosaic-padding-frame {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

.wolf-core-gallery-mosaic {
	figure {
		margin: 0;
		padding: 0;
	}

	.wolf-core-mosaic-block {
		overflow: hidden;
	}

	&.wolf-core-gallery-padding-yes {
		padding: 5px;
		.wolf-core-img-mosaic-padding-frame {
			margin: 5px;
			width: calc(100% - 10px);
			height: calc(100% - 10px);
		}
	}

	.wolf-core-img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	img {
		backface-visibility: hidden;
		display: block;
		vertical-align: bottom;
		width: 100%;
		//transition:opacity .2s ease;
	}

	.wolf-core-img-mosaic {
		position: relative;
		float: left;
		overflow: hidden;
		display: block;

		&:before {
			content: ' ';
			position: absolute;
			height: 100%;
			width: 100%;
			pointer-events: none;
		}

		&:nth-child(6n + 1) {
			width: 50%;
			padding-bottom: 50%;
		}

		&:nth-child(6n + 2) {
			width: 50%;
			padding-bottom: 25%;
		}
		&:nth-child(6n + 3) {
			width: 25%;
			padding-bottom: 25%;
		}
		&:nth-child(6n + 4) {
			width: 25%;
			padding-bottom: 50%;
		}
		&:nth-child(6n + 5) {
			width: 25%;
			padding-bottom: 25%;
		}
		&:nth-child(6n + 6) {
			width: 50%;
			padding-bottom: 25%;
		}

		&:nth-child(6n + 5),
		&:nth-child(6n + 6) {
			margin-top: -25%;
		}
		&:nth-child(6n + 6) {
			margin-left: 25%;
		}
	}
}

/* Mosaic simple */
.wolf-core-gallery-mosaic-alt {
	figure {
		margin: 0;
		padding: 0;
	}

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

	/* Padding */
	&.wolf-core-gallery-padding-yes {
		padding: 5px;
		.wolf-core-img-mosaic-padding-frame {
			margin: 5px;
			width: calc(100% - 10px);
			height: calc(100% - 10px);
		}
	}

	.wolf-core-img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	img {
		backface-visibility: hidden;
		display: block;
		vertical-align: bottom;
		width: 100%;
		//transition:opacity .2s ease;
	}

	.wolf-core-img-mosaic-alt {
		position: relative;
		float: left;
		overflow: hidden;
		display: block;
		width: 25%;
		padding-bottom: 25%;

		&:before {
			content: ' ';
			position: absolute;
			height: 100%;
			width: 100%;
			pointer-events: none;
		}

		&:nth-child(9n + 1),
		&:nth-child(9n + 6) {
			width: 50%;
			padding-bottom: 50%;
		}

		&:nth-child(9n + 2),
		&:nth-child(9n + 5) {
			width: 50%;
			padding-bottom: 25%;
		}

		&:nth-child(9n + 6) {
			float: right;
		}

		// &:nth-child(4n+3){
		// 	width: 50%;
		// 	padding-bottom: 50%;
		// }

		// &:nth-child(4n+4){
		// 	width: 50%;
		// 	padding-bottom: 50%;
		// }
	}
}