.popular-courses {
	&.col-2 {
		ul {
			li {
				width: 50%;
			}
		}
	}
	&.col-3 {
		ul {
			li {
				width: 33.333%;
			}
		}
	}
	&.col-4 {
		ul {
			li {
				width: 25%;
			}
		}
	}
	ul {
		li {
			list-style: none;
		}
	}
	ul {
		margin: auto -15px;
		&:after {
			content: "";
			display: block;
			clear: both;
		}
		li {
			list-style: none;
			float: left;
			padding: 15px;
		}
	}
	&.layout-01 {
		
		
		.courses-inner {
			background: #ffffff;
		}
		.feature-img {
			position: relative;
			.mask {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				height: 100%;
				text-align: center;
				&:before {
					content: "";
					display: inline-block;
					vertical-align: middle;
					height: 100%;
				}
				.mask-content {
					display: inline-block;
					vertical-align: middle;
					height: auto;
					width: 100%;
					.price {
						padding: 42px 30px;
						color: #ffffff;
						font-size: 46px;
						font-weight: bold;
						border-top-left-radius: 20%;
						border-top-right-radius: 20%;
						border-bottom-right-radius: 20%;
					}
				}
			}
		}
		.courses-content {
			padding: 0 30px 50px 30px;
			h3 {
				font-size: 20px;
				font-weight: bold;
				margin-top: 28px;
				a {
					color: $title-color;
				}
			}
		  	h4 {
			  font-size: 11px;
			  font-weight: bold;
			  text-transform: uppercase;
			  margin-top: 8px;
			}
			> div {
				margin-top: 22px;
				display: block;
			}
		}
	}
	&.layout-02 {
		.courses-inner {
			background: #ffffff;
			&:after {
				content: "";
				display: block;
				clear: both;
			}
			.feature-img {
				float: left;
				max-width: 270px;
				margin-right: 30px;
				position: relative;
				.mask {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					height: 100%;
					text-align: center;
					&:before {
						content: "";
						display: inline-block;
						vertical-align: middle;
						height: 100%;
					}
					.mask-content {
						display: inline-block;
						vertical-align: middle;
						height: auto;
						width: 100%;
						.price {
							padding: 42px 30px;
							color: #ffffff;
							font-size: 46px;
							font-weight: bold;
							border-top-left-radius: 20%;
							border-top-right-radius: 20%;
							border-bottom-right-radius: 20%;
						}
					}
				}
			}
			.courses-content {
				padding: 0px 20px 20px 20px;
				h3 {
					padding-top: 20px;
					a {
						color: $title-color;
						font-size: 20px;
						font-weight: bold;
					}
				}
				h4 {
					font-size: 11px;
					font-weight: bold;
					padding-top: 5px;
					text-transform: uppercase;
				}
				> div {
					padding-top: 14px;
					display: block;
				}
			}
		}
	}
}

@media (max-width: 767px) {
    .popular-courses {
		&.col-3, &.col-4 {
			ul {
				li {
					width: 50%;
				}
			}
		}
	}
}
@media (max-width: 380px) {
    .popular-courses {
		&.col-2, &.col-3, &.col-4 {
			ul {
				li {
					width: 100%;
				}
			}
		}
	}
}
