Would like for images in the "additional info" section on mobile to be two columns

Site URL: https://www.swoonlearning.com/store/p/ac-1o1-ss

On desktop, things look, and are working as expected:

On mobile, I would like for these images to be in two columns, not one. I'm using the "stack" image for each of these:

You can use this to Website Tools > Custom CSS

@media screen and (max-width:767px) {
	div#block-ae8679ccf26e48efa451+.row .span-2 {
    column-count: 2;
}
}

This worked well to get it to two columns, but it does look like something strange is happening though as you can see in the IMG_53C061E33961-1.jpeg below. This view is on an iPhone 13 Pro using Google Chrome web browser:

Also, I'm trying to get the "figcaption" to align to the center of the image on mobile. Could you please help me with this? Also, if I add more images to other product page's "additional info" sections, would I just need to swap out the "div#block-ae8679ccf26e48efa451+" with the one on the new page?

@tuanphan that worked very well, thanks so much!