.thim-grid-posts {
	position: relative;
	overflow: hidden;
	&.has-horizontal.has-vertical {
		.grid-horizontal {
			width: 66.67%;
			float: left;
		}
		.grid-vertical {
			width: 33.33%;
			float: left;
			.article-image{
				background: #fff;
			}
		}
	}
	.item-post{
		position: relative;
	}
	.article-wrapper {
		padding: 30px;
		background: #f5f5f5;
		position: absolute;
		&:before{
			content: '';
			position: absolute;
			top: 58px;
			left: -13px;
			border-top: 13px solid transparent;
			border-bottom: 13px solid transparent;
			border-right: 13px solid #f5f5f5;
			z-index: 10;
		}
		.date {
			color: #aaa;
			font-size: 13px;
			margin-top: 4px;
		}
		.title {
			font-size: 17px;
			font-weight: 500;
			line-height: 1.5;
			margin-top: 7px;
			margin-bottom: 9px;
		}
		.desc {
			font-size: 14px;
			font-weight: 400;
			line-height: 1.6;
		}
		.read-more{
			text-transform: uppercase;
			display: inline-block;
			margin-top: 22px;
			margin-bottom: 0;
			font-size: 13px;
			font-weight: 400;
			&:hover{
				text-decoration: none;
			}
			.fa{
				margin-left: 7px;
			}
		}
	}

	.has-feature &{
		width: 75%;
		overflow: hidden;
	}

}
.thim-list-post-inner{
	position: relative;
	&.has-feature{
		z-index: 2;
	}
	.feature-item{
		width: 25%;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100%;
		overflow: hidden;
		&:before{
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,0.6);
			z-index: 2;
		}
		img{
			position: absolute;
			right: 0;
			top: 50%;
			bottom: auto;
			height: 100%;
			left: 50%;
			width: auto;
			max-width: none;
			@include translate(-50%, -50%);

		}
		.article-wrapper{
			z-index: 3;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 63px;
			padding: 0 30px;
			.date{
				color: rgba(255,255,255,0.4);
				font-size: 13px;
			}
			.title{
				font-size: 17px;
				line-height: 1.4em;
				font-weight: 500;
				margin-top: 5px;
				margin-bottom: 10px;
				a{
					color: #fff;
					display: inline-block;
				}
			}
			.desc{
				color: rgba(255,255,255,0.7);
				font-size: 14px;
				margin-bottom: 20px;
			}
			.read-more{
				text-transform: uppercase;
				color: #fff;
				font-size: 13px;
				font-weight: 400;
				margin: 0;
				.fa{
					margin-left: 7px;
				}
			}
		}
	}
	.link_read_more{
		position: absolute;
		right: 0;
		top: -48px;
	}
}

.grid-horizontal {
	.item-post {
		position: relative;
		overflow: hidden;
		.article-image {
			width: 50%;
			float: left;
		}
		.article-wrapper {
			width: 50%;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			height: 100%;
		}
		&:nth-child(2n) {
			.article-image {
				float: right;
			}
			.article-wrapper {
				right: auto;
				left: 0;
				&:before{
					left: auto;
					right: -13px;
					border-right: none;
					border-left: 13px solid #eaeef2;
				}
				.title {
					a {
						color: #fff;
					}
				}
				.date {
					color: rgba(255, 255, 255, 0.4);
				}
				.desc{
					color: rgba(255, 255, 255, 0.7);
				}
				.read-more{
					color: #fff;
				}
				&:hover{
					.title{
						a{
							color: #d6dce2;
						}
					}
				}
			}
		}
	}
}

.grid-vertical{
	.item-post{
		.article-wrapper{
			&:before{
				top: -26px;
				left: 50%;
				right: auto;
				margin-left: -13px;
				border-bottom: 13px solid #f5f5f5;
				border-right: 13px solid transparent;
				border-left: 13px solid transparent;
			}
		}
	}
}
