HTML/CSS - Scroll snap after first item, continue scrolling regularly after

I have a horizontal scrolling box with two items split down the middle. The first item is a large div. I'm trying to get the scrolling to snap at the end of the first item, and then scroll regularly on the second div and its overflowing content. Here is a CodePen demonstrating my current setup.

The HTML:

<div class="snap-row">
    <div class="snap-section large"></div>
    <div class="snap-section">
        <div class="items">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</div>

And the CSS:

.snap-row {
    align-items: stretch;
    display: flex;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-padding: 32px;
    scroll-snap-type: x mandatory;
    width: 100%;
}

.snap-section {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
    width: 50%;
}

.snap-section.large {
    background: blue;
}

.items {
    background: chartreuse;
    font-size: 0;
    padding: 0 32px;
    white-space: nowrap;
}

.item {
    background: red;
    box-sizing: border-box;
    display: inline-block;
    height: 300px;
    margin: 0 8px;
    width: 300px;
}

Thanks so much!