.mondo-grid {
	background-size: cover;
	margin-bottom: 30px;
	overflow: hidden;
	padding-top: 62.5%;
	position: relative;
	width: 100%;
	height: 0;
	word-break: break-word;
	
	.entry-title {
		font-size: @blog-grid-title-font-size;
	}

	.mondo-love-button {
		background-color: @blog-grid-love-button-bg-color;
		border-radius: @blog-grid-love-button-border-radius;
		color: @blog-grid-love-button-text-color;
	  font-size: @blog-grid-love-button-font-size;
		line-height: @blog-grid-love-button-line-height;
		opacity: 0;
		position: absolute;
		right: 10px;
	  bottom: 10px;
	  text-align: center;
	  width: @blog-grid-love-button-width;
	  height: @blog-grid-love-button-height;
	  .transition(all @main-animation);
	  .translateY(10px);

	  .love-count {
	  	font-weight: @blog-grid-love-button-font-weight;
	  }
	}
}

.mondo-grid-mask {
	background-color: @blog-grid-mask-bg-color;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	.transition(background-color @main-animation);

	&:hover {
		background-color: @blog-grid-mask-hover-bg-color;

		.entry-title:after {
			width: 40px;
		}

		.mondo-love-button {
			opacity: 1;
			.translateY(0);
		}
	}
}

.mondo-grid-content {
	color: @blog-grid-text-color;
	padding: 0 15px;
	position: absolute;
	top: 50%;
	text-align: center;
	width: 100%;
	.translateY(-52%);

	.entry-title {
		font-weight: @blog-grid-title-font-weight;
		margin-top: 0;
		margin-bottom: 5px;
		padding-bottom: 15px;
		position: relative;
		text-transform: uppercase;

		&:after {
			background-color: @blog-grid-separator-bg-color;
			content: "";
			margin: 0 auto;
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			width: 20px;
			height: 2px;
			.transition(width @main-animation);
		}
	}

	a {
		color: @blog-grid-text-color;
	}

	.mdi {
		color: @accent-color;
	}
}

.mondo-grid-footer {
	font-weight: @blog-grid-footer-font-weight;
	text-transform: uppercase;
}