.list {
    overflow: hidden;
}
.list-item {
    float: left;
    width: 20%;
}
.list.pad .list-item {
    box-sizing: border-box;
    padding: 10px;
}
.list.row4 .list-item {
    width: 25%;
}
.list.row3 .list-item {
    width: 33%;
}
.list.row2 .list-item {
    width: 50%;
}
@media screen and (max-width: 1000px) {
.list-item, .list.row2 .list-item, .list.row4 .list-item, .list.row3 .list-item {
    width: 25%;
}
}
@media screen and (max-width: 800px) {
.list-item, .list.row2 .list-item, .list.row4 .list-item, .list.row3 .list-item {
    width: 33%;
}
}
@media screen and (max-width: 600px) {
.list-item, .list.row2 .list-item, .list.row4 .list-item, .list.row3 .list-item {
    width: 50%;
}
}
@media screen and (max-width: 400px) {
.list-item, .list.row2 .list-item, .list.row3 .list-item {
    width: 100%;
}
}