how to align 5 iframes side by side that'll span down the page instead of squeeze on mobile

Site URL: https://www.gramsdidit.com/withoutuss

here is the provided embed code below. I achieved 3 across and now can't recreate it if my life depended on it, but on mobile or a narrow window it squeezed. looking to have 5 across and 4 rows down that would adjust into a single column in a narrow window. do I create multiple iframes within this one div tag? nothing seems to work right. please help!! thank you in advance

<div style="width: 100%; max-width: 1240px; margin: 0 auto; position: relative;">
    <style>
      .nft-embed-wrapper > iframe {
        width: 100%!important;
        height:100%!important;
        border: 0;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
    <div class="nft-embed-wrapper" style="position: relative; width:100%; height:0; padding-bottom: calc(100% + 151px);"><iframe src="https://embed.zora.co/0x5180db8F5c931aaE63c74266b211F580155ecac8/5805?title=false&controls=false&loop=true&autoplay=true&market=true" width="100%" height="100%" scrolling="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-pointer-lock allow-same-origin allow-scripts allow-popups"></iframe></div>
  </div>

The url doesn't exist. Can you check?