.video-list {
	margin: 15px 0;

	.video-item {
		display: inline-block;
		width: 33.3%;
		text-align: center;
		color: #333;
		position: relative;
		margin: 0 0 20px;
		vertical-align: top;

		.cover {
			position: relative;
			width: 80%;
			margin: 0 auto;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				background-color: rgba(255, 255, 255, 0.05);
				background-image: url(img/placeholder.png);
				background-size: cover;
				background-position: center;
				display: block;
			}

			.info {
				width: 90%;
				position: absolute;
				height: 18px;
				line-height: 18px;
				padding: 5% 5% 0;
				color: #fff;
				bottom: 0;
				left: 0;
				text-align: left;
				font-size: 0.8em;
				.gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
			}

			.rank-info{
				visibility: hidden;
			}

			.rank-bg{
				width: 60px;
				height: 60px;
				position: absolute;
				left: -30px;
				top: -30px;
				background: @highlightColor;
				.rotation(-45deg);
				opacity: 0.8;
			}

			.rank-num{
				color: #fff;
				width: 25px;
				height: 28px;
				line-height: 28px;
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.title {
			margin-top: 10px;
			font-size: 0.9em;
			color: @titleColor;
			line-height: 17px;
			max-height: 51px;
			overflow: hidden;
		}
	}
}


// iPhone4|5
@media screen and (min-width: 320px) {

	.video-list {

		.video-item {

			.cover {
				width: 86px;
				height: 128px;
			}
		}	
	}
}


// iPhone6 iPhone6+
@media screen and (min-width: 375px) {

	.video-list {

		.video-item {

			.cover {
				width: 110px;
				height: 145px;
			}

			.title {
				font-size: 1em;
			}
		}	
	}
}

// iPad
@media screen and (min-width: 768px) {

	.video-list {

		.video-item {
			width: 20%;
			margin: 10px 0 25px;

			.cover {
				width: 120px;
				height: 160px;
			}
		}	
	}
}