.ube-posts-metro {
	display: grid;
	.ube-grid-item {
		display: grid;
		position: relative;

		&::before {
			content: '';
			display: block;
			padding-top: var(--ube-post-ratio);
		}
	}

	.card {
		border: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
	}


	.card-body {
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding: 0;
		position: relative;
	}

	.card-img {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		@include d-flex();
		@include align-items-center();
		@include justify-content-center();
		position: relative;
		border-radius: 0;
	}

	.card-text {
		z-index: 100;
	}

	.card-img-overlay {
		background-color: rgba(0, 0, 0, 0.5);
		@include d-flex();
		@include flex-column();
		@include transition(0.3s ease-in-out);
		color: #fff;

		a {
			color: currentColor;
		}

		.ube-posted-day {
			font-size: 48px;
			font-weight: 600;
		}

		.ube-entry-title {
			font-size: 24px;
			color: inherit;
		}
	}

	.ube-post-metro-layout-02 {
		.card-img-overlay {
			bottom: 0;
			top: auto;
			padding: 30px;
			height: auto;
		}

		.ube-entry-content {
			display: none;
		}
	}

	.ube-post-metro-layout-03 {
		.ube-post-terms {
			margin-bottom: auto;

			.list-inline-item {
				margin-bottom: 5px;

				a {
					display: block;
					padding: 5px 7px;
					border: 1px solid currentColor;
					border-radius: 2px;
				}

			}
		}
	}
}

.ube-post-image-hover-zoom-in {
	.card-img {
		@include transform(scale(1));
		@include transition(1s ease-in-out);
	}

	.card:hover {
		.card-img {
			@include transform(scale(1.3));
		}
	}
}

.ube-post-image-hover-zoom-out {
	.card-img {
		@include transform(scale(1.5));
		@include transition(1s ease-in-out);
		width: 100%;
	}

	.card:hover {
		.card-img {
			@include transform(scale(1));
		}
	}
}

.ube-post-image-hover-rotate {
	.card-img {
		@include transform(rotate(5deg) scale(1.3));
		@include transition(1s ease-in-out);

	}

	.card:hover {
		.card-img {
			@include transform(rotate(0) scale(1));
		}
	}
}