okay! i think i've got your span tags figured out. part of the problem was all of the span tags had width set to auto. since the span tags themselves were empty that meant that it was defaulting to 0px width. this is easy enough to fix by just making your width equal to your height or however wide you want it.

there is one small problem though and that's that the images you're using aren't uniform in size and you've got the background-size set to 100%. if you set your background-size to match your height and width dimensions, everything should fit just fine? a couple of the sizes of images you might want to mess around with because, like i said, they're not uniform and so squishing one here or there might make it look more even.

let me know if this doesn't work on ao3 (i tried it in a code tester) and i'll take another look!