page-lab.css

.main .page-lab .post__content .lab {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap
}
.main .page-lab .post__content .lab li {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 25%;
  -ms-flex: 1 1 25%;
  flex: 1 1 25%;
  text-align: center;
  margin: 1rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border: .08333rem solid #ddd;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #fbfbfb;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out
}
@media screen and (max-width:64rem) {
  .main .page-lab .post__content .lab li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 33%;
    -ms-flex: 1 1 33%;
    flex: 1 1 33%
  }
}
@media screen and (max-width:43.33333rem) {
  .main .page-lab .post__content .lab li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%
  }
}
.main .page-lab .post__content .lab li a {
  display: block;
  padding: 2rem 1rem
}
.main .page-lab .post__content .lab li a:hover {
  text-decoration: none
}
.main .page-lab .post__content .lab li h3 {
  -webkit-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out
}
.main .page-lab .post__content .lab li p {
  color: #999
}
.main .page-lab .post__content .lab li:active,
.main .page-lab .post__content .lab li:hover {
  background: #f2f2f2
}
.main .page-lab .post__content .lab li:active h3,
.main .page-lab .post__content .lab li:hover h3 {
  color: #429083
}