html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}
img {
  max-width: 100%;
}
figure {
  margin: 0;
  padding: 0px 10px 5px;
}
figure.img :hover {
  background-color: rgba(58, 58, 58, 0.46);
}
figure a {
  display: block;
  padding-bottom: 5px;
}
.demo-content {
  max-width: 840px;
  width: 100%;
  margin-top: 60px;
  margin-right: auto;
  margin-left: auto;
}
.demo-content img {
  border: 5px solid #fff;
}
.picture {
  padding: 36px 0;
  border-bottom: 1px solid #dae1ec;
}
.picture:first-child {
  padding-top: 0;
}
@media screen and (min-width: 630px) {
  .demo-content {
    padding: 10px;
  }
  .picture {
    padding: 0;
    border-bottom: 0;
  }
  .four figure {
    float: left;
    width: 25%;
  }
  .three figure {
    float: left;
    width: 33.333%;
  }
  .two figure {
    float: left;
    width: 50%;
  }
}