body {
    padding: 0;
    margin: 0;
}
main.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    box-sizing: border-box;

    &.test {
        border: 1px dashed red;
    }

    form {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

section {
    xmin-width: 500px;
    box-sizing: content-box;
}

.sub-ref {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

@media (min-width: 800px) {

    .vis-wide { display: block; }
    .vis-narrow {display: none; }

    section.side {
        flex: 0 1 33%;
        max-width: 400px;
    }
    section.main {
        flex: 1 1 0;
        margin-left: 2rem;
    }
}

@media (max-width: 799px) {
    .vis-wide { display: none; }
    .vis-narrow { display: block; }

    main.container section {
        width: 100%;

        &.main {
            padding: 0 1rem 1rem 1rem;
        }
    }
}