html,
body {
    margin: 0;
    padding: 0;
}
.door {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.door > div {
    width: 100%;
    height: 100%;
}
.sixpack {
    float: left;
}
.sixpack:nth-child(1) {
    width: 60%;
}
.sixpack:nth-child(1) .twopack {
    float: left;
}
.sixpack:nth-child(1) .twopack:nth-child(1) {
    width: 25%;
}
.sixpack:nth-child(1) .twopack:nth-child(1) > div:nth-child(1) {
    height: 200px;
}
.sixpack:nth-child(1) .twopack:nth-child(1) > div:nth-child(2) {
    height: 400px;
}
.sixpack:nth-child(1) .twopack:nth-child(2) {
    width: 45%;
}
.sixpack:nth-child(1) .twopack:nth-child(2) > div:nth-child(1) {
    height: 320px;
}
.sixpack:nth-child(1) .twopack:nth-child(2) > div:nth-child(2) {
    height: 280px;
}
.sixpack:nth-child(1) .twopack:nth-child(3) {
    width: 30%;
}
.sixpack:nth-child(1) .twopack:nth-child(3) > div:nth-child(1) {
    height: 260px;
}
.sixpack:nth-child(1) .twopack:nth-child(3) > div:nth-child(2) {
    height: 340px;
}
.sixpack:nth-child(2) {
    width: 40%;
}
.sixpack:nth-child(2) .twopack {
    width: 100%;
}
.sixpack:nth-child(2) .twopack > div {
    float: left;
}
.sixpack:nth-child(2) .twopack:nth-child(1) {}
.sixpack:nth-child(2) .twopack:nth-child(1) > div:nth-child(1) {
    width: 40%;
    height: 120px;
}
.sixpack:nth-child(2) .twopack:nth-child(1) > div:nth-child(2) {
    width: 60%;
    height: 120px;
}
.sixpack:nth-child(2) .twopack:nth-child(2) {}
.sixpack:nth-child(2) .twopack:nth-child(2) > div:nth-child(1) {
    width: 65%;
    height: 260px;
}
.sixpack:nth-child(2) .twopack:nth-child(2) > div:nth-child(2) {
    width: 35%;
    height: 260px;
}
.sixpack:nth-child(2) .twopack:nth-child(3) {}
.sixpack:nth-child(2) .twopack:nth-child(3) > div:nth-child(1) {
    width: 30%;
    height: 220px;
}
.sixpack:nth-child(2) .twopack:nth-child(3) > div:nth-child(2) {
    width: 70%;
    height: 220px;
}
.sixpack:nth-child(3) {
    width: 35%;
}
.sixpack:nth-child(3) .twopack {
    width: 100%;
}
.sixpack:nth-child(3) .twopack > div {
    float: left;
}
.sixpack:nth-child(3) .twopack:nth-child(1) > div:nth-child(1) {
    width: 55%;
    height: 170px;
}
.sixpack:nth-child(3) .twopack:nth-child(1) > div:nth-child(2) {
    width: 45%;
    height: 170px;
}
.sixpack:nth-child(3) .twopack:nth-child(2) > div:nth-child(1) {
    width: 45%;
    height: 360px;
}
.sixpack:nth-child(3) .twopack:nth-child(2) > div:nth-child(2) {
    width: 55%;
    height: 360px;
}
.sixpack:nth-child(3) .twopack:nth-child(3) > div:nth-child(1) {
    width: 65%;
    height: 270px;
}
.sixpack:nth-child(3) .twopack:nth-child(3) > div:nth-child(2) {
    width: 35%;
    height: 270px;
}
.sixpack:nth-child(4) {
    width: 65%;
}
.sixpack:nth-child(4) .twopack {
    float: left;
}
.sixpack:nth-child(4) .twopack:nth-child(1) {
    width: 25%;
}
.sixpack:nth-child(4) .twopack:nth-child(1) > div:nth-child(1) {
    height: 380px;
}
.sixpack:nth-child(4) .twopack:nth-child(1) > div:nth-child(2) {
    height: 420px;
}
.sixpack:nth-child(4) .twopack:nth-child(2) {
    width: 45%;
}
.sixpack:nth-child(4) .twopack:nth-child(2) > div:nth-child(1) {
    height: 520px;
}
.sixpack:nth-child(4) .twopack:nth-child(2) > div:nth-child(2) {
    height: 280px;
}
.sixpack:nth-child(4) .twopack:nth-child(3) {
    width: 30%;
}
.sixpack:nth-child(4) .twopack:nth-child(3) > div:nth-child(1) {
    height: 320px;
}
.sixpack:nth-child(4) .twopack:nth-child(3) > div:nth-child(2) {
    height: 480px;
}
@media screen and (max-width:800px) {
    .sixpack {
        width: 100%!important;
    }
}