It looks fine on my desktop or iPad, but on my phone, it requires either a lot of horizontal scrolling or zooming the page down to a small size to see all the images. So, I recommend switching from using tables to using flexbox. What I have in mind is replacing each table with a single row that will wrap when the screen isn't wide enough for it. To illustrate how it works, I have rewritten the Chess pieces section to use flexbox. I have styled it to resemble how your tables look, but if you decrease the width of your window, you should notice that it behaves differently. To make the other sections work the same way, all you have to do is consolidate the tables cells for each piece into a single div, replace each <td> with <div> and each </td> with </div>, and replace the table tags with <div class="piecerow"> and </div>.
It looks fine on my desktop or iPad, but on my phone, it requires either a lot of horizontal scrolling or zooming the page down to a small size to see all the images. So, I recommend switching from using tables to using flexbox. What I have in mind is replacing each table with a single row that will wrap when the screen isn't wide enough for it. To illustrate how it works, I have rewritten the Chess pieces section to use flexbox. I have styled it to resemble how your tables look, but if you decrease the width of your window, you should notice that it behaves differently. To make the other sections work the same way, all you have to do is consolidate the tables cells for each piece into a single div, replace each
<td>with<div>and each</td>with</div>, and replace the table tags with<div class="piecerow">and</div>.