.walkthrough {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 1em 0 1em -30px;
    position: relative;
}
    .walkthrough .wt-images {
        flex-basis: 58%;
        overflow: hidden;
        position: relative;
    }
        .walkthrough .wt-images:before {
            content: '';
            display: block;
            padding-top: 33%; /* height is 67% of the width, 2:3 aspect ratio */
            width: 100%;
        }
        .walkthrough .wt-images figure {
            bottom: 0;
            left: 0;
            margin: 0;
            overflow: visible;
            position: absolute;
            right: 0;
            top: 0;
        }
            .walkthrough .wt-images figure img {
                height: 100%;
                max-width: 200%;
                position: absolute;
                right: 0;
                top: 0;
                transform: translateZ(0); /* fix sub-pixel rendering shift */
            }
        .walkthrough .wt-images figure, .walkthrough .wt-images figure img {
            opacity: 0;
            transition: opacity 0.5s;
        }
            .walkthrough .wt-images figure.wt-selected, .walkthrough .wt-images figure.wt-selected img.wt-selected {
                opacity: 1;
            }
    .walkthrough .wt-captions {
        display: flex;
        flex-basis: 38%;
    }
        .walkthrough .wt-captions .wt-captions-container {
            display: block;
            flex-direction: column;
            justify-content: center;
        }
        .walkthrough .wt-captions figcaption {
            align-items: center;
            background: white;
            cursor: pointer;
            display: flex;
            flex-grow: 1;
            padding: 26px;
            position: relative;
            transition: background 0.5s;
        }
            .walkthrough .wt-captions figcaption p {
                color: #4c4c4c;
                font-family: "Lato Latin", Arial, Helvetica, sans-serif;
                font-size: 1.2em;
                font-weight: 300;
                margin: 0;
            }
            .walkthrough .wt-captions figcaption strong {
                color: #202020;
                font-weight: 700;
            }
            .walkthrough .wt-captions figcaption em {
                color: #bd1c2b;
                font-style: normal;
            }
            .walkthrough .wt-captions figcaption.wt-selected {
                background: rgb(245, 245, 245);
            }
                .walkthrough .wt-captions figcaption.wt-selected .wt-progress-bar {
                    background: #bd1c2b;
                    content: ' ';
                    height: 0;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 2px;
                }

/* under some magical size, scroll horizontally rather than stack */
@media (max-width: 959px) {
    .walkthrough {
        flex-direction: column;
        left: auto;
        margin-left: 0;
        width: 100%;
    }
        .walkthrough .wt-images {
            display: block;
            flex-basis: auto;
            margin-bottom: 13px;
        }
            .walkthrough .wt-images:before {
                padding-bottom: 67%;
                padding-top: 0;
            }
            .walkthrough .wt-images figure {}
                .walkthrough .wt-images figure img {
                    height: auto;
                    margin: 0 auto;
                    max-width: 100%;
                    right: 0;
                }
        .walkthrough .wt-captions {
            display: block;
            flex-basis: auto;
            overflow: auto;
            width: 100%;
        }
            .walkthrough .wt-captions .wt-captions-container {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                width: 280vw;
            }
                .walkthrough .wt-captions figcaption {
                    flex-grow: 0;
                    padding: 15px 23px;
                    width: 25%; /* 100% ÷ number of walkthrough items */
                }
                    .walkthrough .wt-captions figcaption.wt-selected .wt-progress-bar {
                        height: 2px;
                        width: 0;
                    }
}