eBay HTML CSS description template image gallery loop

Question

Hi I'm currently playing around with updating our stores eBay HTML description template, we use the inkfrog software for listing so I've got to play around with the HTML setup.

I'm trying to get the images for each product to be displayed like this in the description:

The original HTML for this gallery looks like this:

<div class="col-sm-12 col-md-6 col-lg-6 mb-5">
<div class="gallery"> 
   <input type="radio" id="image1" class="image-selector" name="image-selector" checked="checked"> 
   <img src="https://poseidongames.co.uk/wp-content/uploads/2017/11/sub-nautica-below-zero-1.jpg" class="img-fluid main-image animated fadeIn"> 
   <input type="radio" id="image2" class="image-selector" name="image-selector"> 
   <img src="https://poseidongames.co.uk/wp-content/uploads/2017/11/sub-nautica-below-zero-2.jpg" class="img-fluid main-image animated fadeIn"> 
   <input type="radio" id="image3" class="image-selector" name="image-selector"> 
   <img src="https://poseidongames.co.uk/wp-content/uploads/2017/11/sub-nautica-below-zero-3.jpg" class="img-fluid main-image animated fadeIn"> 
</div>
<div class="thumbs"> 
 <ul class="text-center"> 
 <li><label for="image1"><img src="https://poseidongames.co.uk/wp-content/uploads/2017/11/sub-nautica-below-zero-1.jpg" class="thumb"></label></li>
 <li><label for="image2"><img src="https://poseidongames.co.uk/wp-content/uploads/2017/11/sub-nautica-below-zero-2.jpg" class="thumb"></label></li>
 <li><label for="image3"><img src="https://poseidongames.co.uk/wp-content/uploads/2017/11/sub-nautica-below-zero-3.jpg" class="thumb"></label></li>
 </ul> 
</div>
</div>

I've managed to get the thumbnail images to cycle through the images array and display:

using this code:

<div class="thumbs"> 
  <ul class="text-center"> 

      {% for image in images%}
      <li><a href="{{ image.url }}"><img src="{{ image | image_size:'600px' }}" class="thumb"></a></li>
      {% endfor %}

  </ul> 
</div>

What I'm struggling with is the large section...

I've tried this thinking that it would cycle through the images array and add incremental labels to each image, but this doesn't seem to be working... It's been a while since I've played around with code..

<div class="col-sm-12 col-md-6 col-lg-6 mb-5">
    <div class="gallery">
      {{x = 0}}
    {% for image in images%}
    <input type="radio" id="image[x]" class="image-selector" name="image-selector" checked="checked"> 
    <img src="image" class="img-fluid main-image animated fadeIn"> 
      {{x = x + 1}}
    {% endfor %}
</div>