@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-features-list {
	.title {
		font-size: 36px;
		font-weight: 500;
		// letter-spacing: 0.3px;
		line-height: normal;
		margin-top: 30px;
	}
	&.title-border-after {
		.title {
			padding-bottom: 20px;
			position: relative;
			&::after {
				position: absolute;
				content: "";
				width: 60px;
				height: 1px;
				background: #e0e0e0;
				left: 0;
				bottom: 0;
			}
		}
	}
	.meta-content {
		list-style: none;
		margin-left: 0;
		margin-top: 30px;
		margin-bottom: 30px;
		max-width: 500px;
		li {
			margin-bottom: 30px;
			&:last-child {
				margin-bottom: 0;
			}
			.sub-title {
				font-size: 20px;
				font-weight: 500;
				line-height: 22px;
				margin-bottom: 12px;
				a {
					color: inherit;
					font-size: inherit;
				}
			}

			// .description {
			// 	font-size: 16px;
			// 	font-weight: 300;
			// 	color: #878787;
			// 	text-align: left;
			// 	line-height: 1.5;
			// }
		}
	}
	.rank {
		display: none;
	}

	&.style-1 {
		.title {
			font-size: 36px;
			line-height: 45px;
			font-weight: 500;
			color: #ffffff;
			text-transform: uppercase;
		}
		.meta-content {
			margin-top: 60px;
			max-width: 455px;
			li {
				margin-top: 60px;
			}
			.sub-title {
				// font-size: 18px;
				// line-height: 26px;
				font-weight: 500;
				color: white;
				margin-bottom: 12px;
				@include transition(all 0.5s);
				padding-left: 90px;
				padding-right: 0;
				position: relative;
				.rank {
					vertical-align: middle;
					display: inline-block;
					line-height: 60px;
					text-align: center;
					border-radius: 50%;
					width: 60px;
					height: 60px;
					font-size: 20px;
					font-weight: 500;
					margin-right: 30px;
					position: absolute;
					left: 0;
					right: auto;
					.number {
						position: absolute;
						width: 60px;
						height: 60px;
						line-height: 60px;
						text-align: center;
						color: white;
					}
				}
			}
			.description {
				padding-left: 90px;
				color: #e2e0db;
			}
		}
	}
}