<div className='section-container'>
<div ref={targetRef} className='screen'>
<div className='grid'>
<div
className='card'
style={{ '--x': -346, '--y': -420, '--s': -0.25, '--r': 18 }}
>
<img
src='https://recreated.dev/demo/spark/card-1.png'
alt=''
width={135}
height={135}
/>
</div>
<div
className='card'
style={{ '--x': 308, '--y': -302, '--s': 0.2, '--r': 16 }}
>
<img
src='https://recreated.dev/demo/spark/card-2.png'
alt=''
width={135}
height={135}
/>
</div>
<div
className='card'
style={{ '--x': -235, '--y': -193, '--s': 0.3, '--r': -22 }}
>
<img
src='https://recreated.dev/demo/spark/card-3.png'
alt=''
width={135}
height={135}
/>
</div>
<div
className='card'
style={{ '--x': 288, '--y': -262, '--s': 0, '--r': -14 }}
>
<img
src='https://recreated.dev/demo/spark/card-4.png'
alt=''
width={135}
height={135}
/>
</div>
<div
className='card'
style={{ '--x': -270, '--y': -409, '--s': 0.2, '--r': -14 }}
>
<img
src='https://recreated.dev/demo/spark/card-5.png'
alt=''
width={135}
height={135}
/>
</div>
<div
className='card'
style={{ '--x': 253, '--y': -240, '--s': 0, '--r': -14 }}
>
<img
src='https://recreated.dev/demo/spark/card-6.png'
alt=''
width={135}
height={135}
/>
</div>
<div
className='card'
style={{ '--x': -300, '--y': -50, '--s': 0.4, '--r': -11 }}
>
<img
src='https://recreated.dev/demo/spark/card-7.png'
alt=''
width={135}
height={135}
/>
</div>
<div
className='card'
style={{ '--x': 350, '--y': -86, '--s': 0.3, '--r': 23 }}
>
<img
src='https://recreated.dev/demo/spark/card-8.png'
alt=''
width={135}
height={135}
/>
</div>
</div>
<img
src='https://recreated.dev/demo/spark/screen.webp'
alt=''
className=''
width={361}
height={736}
/>
</div>
</div>