Safari nested grid gap?

[bradryanbice]

I'm only seeing this in Safari (OS X and iOS), but when nesting a grid, I am getting the attached gap at the end of the nested row. Not an issue in Chrome or Firefox on Mac.

HTML:

<div class="grid-lost-2 om-grid-display">
    <section>
        <div>1</div>
        <div>2</div>
        <div>3
            <section>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </section>
        </div>
    </section>
</div>

SCSS:

.grid-lost {
    & + & {
        margin-top: 3.2rem;
    }
    section {
        lost-center: 1170px; // Max-width, center and clearfix
    }
    div {
        lost-column: 1/4;
        @media all and (min-width: $break1) {
            lost-column: 1/6;
        }
        @media all and (min-width: $break2) {
            lost-column: 1/12;
        }
    }
}

.grid-lost-2 {
    @extend .grid-lost;
    & > section > div {
        lost-column: 1/4;
    }
    & > section > div:last-child {
        lost-column: 1/2 3;
    }
    & > section > div > section > div {
        lost-column: 1/4;
    }
}

[bradryanbice]

Sorry, wrong repo :)