.picture-pack {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: 100%;
    margin: 0 auto;
    padding: 4px 12px;
  }
  .picture-pack .pic {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    padding: 4px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(100%/3);
            flex: 1 1 calc(100%/3);
  }
  .picture-pack .pic--small {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 25%;
            flex: 1 1 25%;
  }
  .picture-pack .pic--large {
    -webkit-box-flex: 1;
        -ms-flex: 1 2 50%;
            flex: 1 2 50%;
  }

  .picture-pack .pic--full {
    width: 100%;
    -webkit-box-flex: none;
        -ms-flex: none;
            flex: none;
  }

  @media only screen and (max-width: 768px) {
    .picture-pack .pic {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 412px;
              flex: 1 1 412px;
    }
  }
  .picture-pack .pic .aspect {
    width: 100%;
    height: 0;
    position: relative;
  }
  .picture-pack .pic .aspect--16-9 {
    padding-top: 56.25%;
  }
  .picture-pack .pic .aspect--4-3 {
    padding-top: 75%;
  }
  .picture-pack .pic .aspect > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #eee;
    background-position: center center;
    background-size: cover;
  }