I need to display a variant image on a radio button variant selector, but can't seem to find how to properly pull the variant img src. Shopify - shopify

Question

So I'm on Shopify product template (using Debut Theme). I changed the default dropdown variant selector to radio buttons and it works great. I wanted the radio buttons to display the variant image, and that's where I'm stuck. (Here's a link to a test product where I want this to work: TEST product link
Here's the radio button form:
{% form 'product', product, class:form_classes %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<label style="font-weight: 700; font-size: 1.2em;"{% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
¡Escoge la versión que quieres!
</label>
{% assign option_position = forloop.index %}
<fieldset class="botones-radio">
{%- for value in option.values -%}
<div class="imagen-mas-boton">
<input type="radio" class="single-option-selector-{{ section.id }} "
{% if option.selected_value == value %} checked="checked"{% endif %}
value="{{ value | escape }}"
data-index="option{{option_position}}"
name="{{ option.name | handleize }}"
id="SingleOptionSelector-{{option_position}}">
<img src="{{ featured_image | img_url: '200x' }}" />
<label style="text-align: center;" for="SingleOptionSelector-{{ forloop.index0 }}">
{{value}}
</label>
</div>
{%- endfor -%}
</fieldset>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
{% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
</div>
{% endif %}
<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
{% endform %}
Now, the <img src="{{ featured_image | img_url: '200x' }}" /> obviously displays the featured image so both variants will display the same image, and both will change when selecting the other variant and refreshing the page.
I want to display the image assigned to each variant. I tried <img src="{{ variant| img_url: '200x' }}" /> and <img src="{{ variant.image | img_url: '200x' }}" />
But it doesn't seem to work.
I also would like to display each variants price on the lable, for this I tried the following:
<label style="text-align: center;" for="SingleOptionSelector-{{ forloop.index0 }}"> {{value}} {{current_variant.price | money }} </label>
but this will show the price of the selected variant and will only change when refreshed.