$header-height: 9em !default; $link-change-time: .3s !default; $middle-width: 960px !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;
}

}