.tm-portfolio-featured {
	&.style-01 {
		height: 100%;

		.post-wrapper {
			display: flex;
			align-items: stretch;
			height: 100%;
		}

		.post-info {
			position: relative;
			width: 50%;
			display: flex;
			align-items: center;
			padding: 50px 50px 50px 150px;

			.inner {
				max-width: 400px;
			}
		}

		.post-feature {
			width: 50%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}

		.post-categories {
			margin-bottom: 34px;
		}

		.post-title {
			position: relative;
			font-size: 48px;
			line-height: 1.11;
			margin-bottom: 131px;

			a {
				color: inherit;
			}
		}

		.post-number {
			position: absolute;
			top: 20px;
			left: -40px;
			font-size: 18px;
		}

		.post-character {
			font-size: 300px;
			color: #b40720;
			position: absolute;
			top: 50%;
			right: 0;
			transform: translate(50%, -50%);
		}

		.post-read-more {
			font-size: 18px;
			font-weight: 700;
			color: #222;

			&:hover {
				.btn-icon {
					color: #222;
					transform: translateX(5px);
				}
			}

			.btn-icon {
				@extend %transit;
				position: relative;
				content: '';
				width: 73px;
				top: -5px;
				height: 2px;
				display: inline-block;
				color: rgba(0, 0, 0, .1);
				background: currentColor;
				margin-left: 15px;

				&:before {
					content: '';
					position: absolute;
					top: -7px;
					right: 1px;
					width: 16px;
					height: 16px;
					border: 2px solid currentColor;
					border-left: 0;
					border-bottom: 0;
					transform: rotate(45deg);
					transform-origin: 50% 50%;
				}
			}
		}

	}

	&.style-02 {
		height: 100%;

		.post-wrapper {
			height: 100%;
			display: flex;
			align-items: stretch;
		}

		.post-info {
			padding: 150px;
			width: 100%;
			display: flex;
			align-items: center;

			.inner {
				position: relative;
				width: 100%;
			}

			.main-info {
				position: relative;
				z-index: 1;
				max-width: 400px;
				min-height: 550px;
				display: flex;
				align-items: center;
			}
		}

		.post-categories {
			position: absolute;
			bottom: -130px;
			left: 40px;
			font-size: 18px;
			color: #222;

			&:before {
				content: '';
				width: 110px;
				height: 1px;
				background: currentColor;
				display: inline-block;
				position: relative;
				top: -5px;
				margin-right: 20px;
			}

			a {
				color: inherit;
			}
		}

		.post-title {
			position: relative;
			font-size: 56px;
			line-height: 1.13;
			margin-bottom: 140px;

			a {
				color: inherit;
			}
		}

		.post-number {
			font-size: 100px;
			line-height: 1.06;
			margin-bottom: 77px;
		}

		.post-feature {
			position: absolute;
			top: 0;
			left: 40px;
			display: inline-block;
			padding-right: 245px;
		}

		.post-gradient {
			position: relative;
			width: 550px;
			max-width: 100%;
			//height: 550px;
			/* Rectangle 2: */
			background-image: linear-gradient(-135deg, #ffe543 0%, #409845 100%);
			box-shadow: 0 20px 30px 0 rgba(131, 232, 239, 0.10);

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

		.post-thumbnail {
			position: absolute;
			top: 30px;
			bottom: 30px;
			width: calc(100% - 60px);
			right: 0;
			transform: translate(50%, 0);
		}

		.post-read-more {
			font-size: 18px;
			font-weight: 700;
			color: #222;

			&:hover {
				.btn-icon {
					transform: translateX(5px);
				}
			}

			.btn-icon {
				@extend %transit;
				position: relative;
				content: '';
				width: 73px;
				top: -5px;
				height: 2px;
				display: inline-block;
				color: #222;
				background: currentColor;
				margin-left: 15px;

				&:before {
					content: '';
					position: absolute;
					top: -7px;
					right: 1px;
					width: 16px;
					height: 16px;
					border: 2px solid currentColor;
					border-left: 0;
					border-bottom: 0;
					transform: rotate(45deg);
					transform-origin: 50% 50%;
				}
			}
		}
	}
}

@include media-breakpoint-down(lg) {
	.tm-portfolio-featured {
		&.style-01 {
			.post-character {
				font-size: 240px;
			}

			.post-info {
				padding-left: 100px;
			}

			.post-title {
				font-size: 42px;
				margin-bottom: 100px;
			}
		}

		&.style-02 {
			.post-info {
				padding: 150px 100px;
			}

			.post-title {
				font-size: 48px;
				margin-bottom: 100px;
			}
		}
	}
}

@include media-breakpoint-down(md) {
	.tm-portfolio-featured {
		&.style-01 {
			.post-character {
				font-size: 180px;
			}

			.post-info {
				padding-left: 50px;
			}

			.post-title {
				font-size: 36px;
				margin-bottom: 50px;
			}
		}

		&.style-02 {
			.post-info {
				padding: 100px 50px;

				.main-info {
					min-height: 0;
				}
			}

			.post-feature {
				left: 0;
			}

			.post-gradient {
				width: 350px;
			}

			.post-title {
				font-size: 40px;
				margin-bottom: 60px;
			}

			.post-number {
				font-size: 80px;
			}

			.post-categories{
				bottom: -80px;
			}
		}
	}
}

@include media-breakpoint-down(sm) {
	.tm-portfolio-featured {
		&.style-01 {
			.post-wrapper {
				flex-flow: column;
			}

			.post-feature,
			.post-info {
				width: 100%;
				height: 50%;
			}

			.post-feature {
				order: 1;
				min-height: 400px;
			}

			.post-info {
				order: 2;
			}

			.post-character {
				font-size: 120px;
				top: 0;
				right: 50%;
			}
		}

		&.style-02 {
			.post-info {
				padding: 100px 30px;
			}

			.post-gradient {
				width: 260px;
			}

			.post-number {
				font-size: 60px;
			}
		}
	}
}
