Two column code block stack on mobile

Site URL: https://flamingo-fish-258z.squarespace.com/

I currently have a grid of 9 code blocks. They are in a grid of 3x3, and look great on desktop, but when I view them on mobile, they just go into one big line.

I found some code from a previous question that allowed for a 3 column grid on mobile, but that's too small for my needs, so I'm looking for a way to do  two columns

This is the script I had for 3 columns on mobile:

/* 3 columns mobile */
@media screen and (max-width:640px) {
div#page-section-5fb3c8668ae3d9089a285b49>.row:first-child .span-4 {
    width: 33.33% !important;
    float: left !important;
}
}

If I change the width to 50%, it's almost perfect in 2 columns, but then there are 3 blocks at the end that are stacked on one side. Like this:

1 2

3 4

5 6

7

8

9

and I need it to look like:

1 2

3 4

5 6

7 8

9

website: https://flamingo-fish-258z.squarespace.com/

pass: iconic

Is there any way to get this working with 2 columns? Thank you in advance!

You mean girl posters? It looks like you solved this?