.tm-banner {
	&.style-01 {

		.banner-wrap {
			position: relative;
			text-align: center;
		}

		.banner-image {
			position: relative;
			display: inline-block;

			&:after {
				@extend %ContentAbsolute;
				background: rgba(0, 0, 0, .2);
			}
		}

		.banner-content-wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.banner-content-inner {
			display: table;
			width: 100%;
			height: 100%;
		}

		.banner-content-main {
			display: table-cell;
			vertical-align: middle;
		}

		.banner-heading {
			font-size: 24px;
			color: #ffffff;
			line-height: 1.375;
			margin-bottom: 25px;
		}
	}

	&.style-02 {

		.banner-wrap {
			position: relative;
			width: 100%;
			padding: 23px 24px;
			border: 2px solid #eee;
			border-radius: 4px;
			background-color: #fff;
			display: flex;
			align-items: center;
			@include transit;

			&:hover {
				border-color: red;

				img {
					transform: scale(1.05);
				}
			}
		}

		.banner-image {
			margin-right: 10px;
			flex-shrink: 0;
		}

		.banner-content-wrap {
			flex-grow: 1;
		}

		.banner-content-inner {

		}

		.banner-content-main {

		}

		.banner-heading {
			font-size: 20px;
			font-weight: 500;
			color: #333333;
			margin-bottom: 5px;

			mark {
				font-size: 40px;
			}
		}

		.tm-banner-button {
			border: 0;
			font-size: 14px;
			font-weight: 500;

			&:hover {
				.button-text {
					&:after {
						margin-left: 10px;
					}
				}
			}
		}

		.button-text {
			&:after {
				content: '\f178';
				@extend %FontAwesomeRegular;
				margin-left: 7px;
				@include transit;
			}
		}
	}
}