Adjusting iframe size for mobile responsiveness in Tailwind CSS

<div className='bg-black rounded-lg shadow-xl lg:col-span-2 flex'>
  <div className='w-2/5 h-full hidden lg:flex lg:visible'>
    {/* ... (omitted for brevity) */}
  </div>
  <div className='w-full h-full flex flex-col overflow-hidden'>
    <div className='w-full h-1/3 border flex items-center'>
      <h2 className='uppercase text-sm lg:text-xl font-clash tracking-widest ml-4 font-bold text-white'>Current Rotation</h2>
    </div>
    <div className='flex w-[100%] lg:w-[60%] border h-auto mx-auto transition ease-in duration-150'>
      {sounds.map((slide, index) => (
        <iframe 
          allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
          width="100%"
          height="200"
          key={index}
          style={{
            maxWidth: '500px',
            maxHeight: '200px',
            overflow: 'hidden',
            borderRadius: '10px',
            padding: '0 5px'
          }}
          src={slide}
        ></iframe>
      ))}
    </div>
  </div>
</div>