html,
body {
    margin: 0;
    padding: 0;
}

.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;
    }
}