.tm-gallery {
	position: relative;

	img {
		width: 100%;
	}

	.caption {
		display: none !important;
	}

	.gallery-item {
		overflow: hidden;

		&:hover {
			.overlay {
				visibility: visible;
				opacity: .9;
			}
		}

		> a {
			display: block;
			position: relative;
			width: 100%;
			height: 100%;
		}
	}

	.overlay {
		@extend %transit2;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		visibility: hidden;

		> div {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 36px;
			color: #fff;
		}
	}

	&.style-metro {
		.item-wrapper {
			position: relative;
			display: flex;
			align-items: stretch;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			height: 100%;
			width: 100%;

			&:before {
				content: '';
				display: block;
				padding-top: 100%;
			}
		}

		.grid-width-2 {
			.item-wrapper {
				&:before {
					padding-top: 50%;
				}
			}
		}

		.grid-height-2 {
			.item-wrapper {
				&:before {
					padding-top: 200%;
				}
			}
		}

		.grid-width-2.grid-height-2 {
			.item-wrapper {
				&:before {
					padding-top: 100%;
				}
			}
		}
	}

	&.style-metro-02 {
		.item-wrapper {
			position: relative;
			display: flex;
			align-items: stretch;
			background-position: center;
			background-size: cover;
			height: 100%;
			width: 100%;

			&:before {
				content: '';
				display: block;
				padding-top: 67%;
			}
		}

		.grid-width-2 {
			.item-wrapper {
				&:before {
					padding-top: 67%;
				}
			}
		}

		.grid-height-2 {
			.item-wrapper {
				&:before {
					padding-top: 134%;
				}
			}
		}

		.grid-width-2.grid-height-2 {
			.item-wrapper {
				&:before {
					padding-top: 67%;
				}
			}
		}
	}
}

@include media-breakpoint-down(sm) {
	.tm-gallery {
		&.style-metro {
			.grid-width-2,
			.grid-height-2 {
				.post-wrapper {
					&:before {
						padding-top: 100%;
					}
				}
			}
		}
	}
}
