

/* ........... S P L I T  C O N T A I N E R............ */


/*Grid — Half Width*/

.Split {
    display: grid;
    position: relative;
    overflow: hidden;
}

@media (min-width:1024px) {
    .Split {
        grid-template-columns: 50% 50%;
    }

        .Split .ContentWidth {
            max-width: 1100px;
            margin: 0;
        }
        /* left */
        .Split > div:nth-of-type(1) .ContentWidth,
        .Split > div:nth-of-type(4) .ContentWidth,
        .Split > div:nth-of-type(6) .ContentWidth {
            margin-left: auto;
        }

        /* Right */
        .Split > div:nth-of-type(2) .ContentWidth,
        .Split > div:nth-of-type(3) .ContentWidth,
        .Split > div:nth-of-type(5) .ContentWidth {
            margin-right: auto;
        }

        /* End Filler */
        .Split > *:nth-last-child(1):nth-child(odd)::before {
            content: "";
            display: block;
            float: left;
            position: absolute;
            width: 50%;
            height: 100%;
            margin-left: 50%;
        }
}


/*Interlace photos — Order*/

.Split > div:nth-of-type(1) {
    order: 1;
}

.Split > div:nth-of-type(2) {
    order: 2;
}

.Split > span:nth-of-type(1) { /* Photo 1 */
    order: 3;
}

.Split > div:nth-of-type(3) {
    order: 4;
}

.Split > div:nth-of-type(4) {
    order: 5;
}

.Split > span:nth-of-type(2) { /* Photo 2 */
    order: 6;
}

.Split > span:nth-of-type(3) { /* Photo 3 */
    order: 7;
}

.Split > div:nth-of-type(5) {
    order: 8;
}

.Split > div:nth-of-type(6) {
    order: 9;
}

.Split > div:nth-of-type(7) {
    order: 10;
}


/* Photos min height */

.Split span {
    min-height: 30em;
}
