.photo-frame {
    width:88vw;
    margin:0 auto;
    font-size:0;
    margin-bottom:-2vw;
}

.photo-frame:after {
    content:'';
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

.photo-frame a {
    display:inline-block;
    width:28vw;
    height:22vw;
    overflow:hidden;
    float:left;
    margin-right:2vw;
    margin-bottom:2vw;
    border-radius:.2rem;
    
    vertical-align:top;
    position:relative;
}

.photo-frame a:nth-child(10n+3), .photo-frame a:nth-child(10n+5), .photo-frame a:nth-child(10n+8) {
    margin-right:0;
}

.photo-frame a:nth-child(10n+5) {
    width:58vw;
    margin-right:0;
}

.photo-frame a:nth-child(10n+5) img {
    width:150%;
    height:auto;
}

.photo-frame a:nth-child(10n+8) {
    height:46vw;
    float:right;
    margin-right:0;
}

.photo-frame a:nth-child(10n+8) img {
    width:auto;
    height:150%;
}

.photo-frame a img {
    width:200%;
    height:auto;
    
    position:absolute;
    top:-40%;
    left:-40%;
}

/* 1 photo */

.photo-frame a:nth-child(1):nth-last-child(1) {
    width:100vw;
    height:auto;
    margin-bottom:2vw;
    margin-left:-6vw;
    border-radius:0;
}

.photo-frame a:nth-child(1):nth-last-child(1) img {
    width:100%;
    height:auto;
    position:static;
}

/* 2 photos */

.photo-frame a:nth-child(1):nth-last-child(2) {
    width:58vw;
}

.photo-frame a:nth-child(1):nth-last-child(2) img {
    width:150%;
    height:auto;
}

.photo-frame a:nth-child(2):nth-last-child(1) {
    margin-right:0;
}

/* 3 photos */

.photo-frame a:nth-child(1):nth-last-child(3), .photo-frame a:nth-child(2):nth-last-child(2), .photo-frame a:nth-child(3):nth-last-child(1) {
    height:46vw;
}

.photo-frame a:nth-child(1):nth-last-child(3) img, .photo-frame a:nth-child(2):nth-last-child(2) img, .photo-frame a:nth-child(3):nth-last-child(1) img {
    width:auto;
    height:150%;
}

.photo-frame a:nth-child(3):nth-last-child(1) {
    margin-right:0;
}

/* 4 photos */

.photo-frame a:nth-child(1):nth-last-child(4), .photo-frame a:nth-child(3):nth-last-child(2) {
    width:58vw;
    margin-right:2vw;
}

.photo-frame a:nth-child(1):nth-last-child(4) img {
    width:150%;
    height:auto;
}

.photo-frame a:nth-child(2):nth-last-child(3), .photo-frame a:nth-child(4):nth-last-child(1) {
    margin-right:0;
}

/* 6 photos */

.photo-frame a:nth-child(5):nth-last-child(2) {
    width:28vw;
    margin-right:2vw;
}

.photo-frame a:nth-child(5):nth-last-child(2) img {
    width:200%;
    height:auto;
    
    position:absolute;
    top:-40%;
    left:-40%;
}

.photo-frame a:nth-child(6):nth-last-child(1) {
    margin-right:0;
}

/* 7 photos */

.photo-frame a:nth-child(7):nth-last-child(1) {
    width:58vw;
    margin-right:0;
}

.photo-frame a:nth-child(7):nth-last-child(1) img {
    width:150%;
    height:auto;
}

/* 8 photos */

.photo-frame a:nth-child(8):nth-last-child(1) {
    height:22vw;
    float:left;
}

.photo-frame a:nth-child(8):nth-last-child(1) img {
    width:200%;
    height:auto;
}

/* 9 photos */

.photo-frame a:nth-child(9):nth-last-child(1) {
    width:58vw;
}

.photo-frame a:nth-child(9):nth-last-child(1) img {
    width:150%;
    height:auto;
}

.swipebox {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.swipebox img {
	opacity: 0.0;
}