main {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    
    /* width: 45%;
    margin: auto;
    overflow: visible; */
}

main > div {
    flex: 100vw 0 0;
    /* flex-basis: 45vw; */
}

/* main > div:first-of-type {
    background-color: #0000ff;
}

main > div:last-of-type {
    background-color: #ff0000;
} */

main.swapped > div:last-of-type, main:not(.swapped) > div:first-of-type {
    order: 2;
}

main.slide > div {
    transition: margin-left .5s;
}


main.swapped.back > div:first-of-type, main:not(.swapped).back > div:last-of-type {
    order: 1;
    margin-left: -100%;
}

main.swapped:not(.back) > div:first-of-type, main:not(.swapped):not(.back) > div:last-of-type {
    order: 3;
}