.tm-gradation {
	display: flex;

	.dot-wrap {
		max-width: 270px;
		position: relative;
		height: 80px;
		width: 80px;
		margin: 0 auto 24px;
	}

	.dot {
		background: blue;

		&:before,
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background: inherit;
		}

		&:before {
			width: 80px;
			height: 80px;
			opacity: .3;
		}

		&:after {
			width: 60px;
			height: 60px;
			opacity: .7;
		}
	}

	.count {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 40px;
		width: 40px;
		line-height: 40px;
		font-size: 16px;
		font-weight: 600;
		color: #fff;
		background: inherit;
		border-radius: 50%;
		text-align: center;
		z-index: 3;
	}

	.line {
		position: absolute;
		top: 40px;
		right: 100%;
		transform: translateX(50%);
		background: #ddd;
		width: 60%;
		height: 1px;
	}

	.item {
		flex-grow: 1;
		position: relative;
		opacity: 0;
		padding: 0 10px;

		&.animate {
			opacity: 1;
			-webkit-transform: translateX(100px);
			transform: translateX(100px);
			-webkit-animation: moveHorizontal 0.65s ease forwards;
			animation: moveHorizontal 0.65s ease forwards;
		}

		&:first-child {
			.line {
				display: none;
			}
		}

		&:hover {
			.content-wrap {
				background: #222;
				box-shadow: 0 15px 30px rgba(0, 0, 0, .06);
				filter: drop-shadow(0 15px 30px rgba(0, 0, 0, .06));
				color: #fff;

				&:before {
					border-bottom-color: #222;
				}
			}

			.title {
				color: #fff;
			}
		}
	}

	.content-wrap {
		@extend %transit;
		position: relative;
		text-align: center;
		max-width: 270px;
		margin: 0 auto;
		background: #fff;
		padding: 38px 30px 44px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
		filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .06));

		&:before {
			@extend %transit;
			position: absolute;
			bottom: 100%;
			left: 50%;
			transform: translateX(-50%);
			content: '';
			border-bottom: 13px solid #fff;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
		}
	}

	.title {
		@extend %transit;
		font-size: 16px;
		margin-bottom: 12px;
	}
}

@include media-breakpoint-down(sm) {
	.tm-gradation {
		display: block;

		.line {
			width: 180px;
			left: 50%;
			right: auto;
			bottom: auto;
			top: -40px;
			transform: translateX(-50%);
		}

		.item {
			width: 100%;

			+ .item {
				margin-top: 80px;
			}
		}
	}
}
