I came up with an alternate solution using only inline styles. The new platform I have to use strips my style tags and therefore my @media queries, but has no limits on inline styles, so this is for anyone that is in a similar situation.

The trick is to use nested grids of 2 elements inside a wrapper grid. For this example lets assume you want the minimum width of a column to be 150px. Style the nested grids with

grid-template-columns: repeat(auto-fit,minmax(150px,1fr));

and the wrapper with

grid-template-columns: repeat(auto-fit,minmax(min(100vw,300px),1fr));

What happens is as the size shrinks passed 600px the wrapper drops from 2x 300px columns to 1 599px column, each holding the nested grid of 2 columns. Therefore 4 columns to 2.

the min(100vw,300px) part on the wrapper is to allow the 2 columns to shrink to 1 column if the screen is smaller than 2x minimum column size.

A full example would be

<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100vw,300px),1fr));">
    <div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr));">
        <div>content</div>
        <div>content</div>
    </div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr));">
        <div>content</div>
        <div>content</div>
    </div>
</div>