$header-height: 9em !default;
$link-change-time: .3s !default;
$middle-width: 952px !default;
// TIPS: 若调整 $middle-width 请同步修改 drawer.scss 中 .ml-drawer 之宽度 

.ml-main {
	margin: 0 auto;	
	padding: $header-height 0 4em;
	max-width: $middle-width
}

.ml-card-list dt::before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 2em;
}

.ml-block-list li {
	list-style: none;
}

.ml-card-list li {
	list-style: none;
	margin: 8px 4px;
	display: inline-block;
}

.ml-card-list dd {
	padding-bottom: 1em;
}

.ml-card-list dt {
	position: relative;
	left: -30px;
}

.ml-card-list {
	margin-left: 6px;
	padding-left: 20px;
	line-height: 1.2rem;
}

.ml-card-list h2 {
	margin: 5px 0;
}

.ml-card-anchor {
	width: (($middle-width - 150px) / 2);
	height: 10rem;
	display: inline-block;
	position: relative;
	border: none;
	overflow: hidden;
}

.ml-card-anchor .ml-card-text {
	position: absolute;
	bottom: 0;
	padding: 10px;
	padding-top: 14px;
	@media screen and (prefers-reduced-motion: no-preference) {
		padding-top: 4px;
		transition: all $link-change-time;
	}
}

.ml-card-anchor img {
	opacity: 0.2;
	position: absolute;
	left: 0;
	top: 0;
	@media screen and (prefers-reduced-motion: no-preference) {
		transition: all $link-change-time;
	}
}

.ml-card-anchor:hover img {
	opacity: 0.1;
}

.ml-card-anchor:hover .ml-card-text {
	bottom: 10px;
}

@media (min-width: 1600px) {
	.ml-main {
		max-width: 60%;
	}
	.ml-card-anchor {
		width: 30rem;
	}
}


@media (max-width: 959px) {
	.ml-main {
		margin: 0 1em;
		padding: $header-height 0 4em;
	}
	.ml-card-anchor {
		width: 40vw;
	}
}

@media (max-width: 767px) {
	.ml-card-anchor {
		width: 80vw;
		height: 9rem;
	}
}

@media (max-width: 539px) {
	.ml-card-anchor {
		height: 12rem;
	}
}