Mobile responsive filterable collection list

Hey community! I’ve built the below browse experience containing a collection list of products (e-commerce) and filters.

The problem I’m running into is how to make this responsive to smaller screens as the two column css grid setup isn’t really scalable as shown in mobile view.

I’m trying to figure out how I can nest the filters into a sidenav that pops out when you click a filters icon, but can’t figure out the right elements to make that work or generally how to best make this mobile responsive. Struggling to find any vids or content on how to do this. Would love any tips!

Thanks,
Sam


https://preview.webflow.com/preview/tinyzaps?utm_medium=preview_link&utm_source=designer&utm_content=tinyzaps&preview=58506d173aba36c7fb55b5eb530ab889&pageId=65481f97e868df9073f9f2fc&workflow=preview