{% load static %}
{% load wagtailcore_tags %}
{% load wagtailimages_tags %}
<div class="design-system-container design-system-my-6w">
  <div class="design-system-grid-row design-system-grid-row--gutters">
    {% if value.image_side == "left" %}
      <div class="design-system-col-12 design-system-col-sm-{{ value.image_ratio }}">
        <div class="bordered design-system-px-2w">{% image value.image original class="design-system-responsive-img" alt="" %}</div>
      </div>
      <div class="design-system-col-12 design-system-col-sm{{ -12|add:value.image_ratio }}">
        {{ value.text|richtext }}

        {% if value.link is not None and value.link.url %}
          <a class="design-system-link design-system-fi-arrow-right-line design-system-link--icon-right"
             href="{{ value.link.url }}">{{ value.link.text }}</a>
        {% elif value.page and value.link_label %}
          <a class="design-system-link design-system-fi-arrow-right-line design-system-link--icon-right"
             href="{{ value.page.url }}">{{ value.link_label }}</a>
        {% elif value.link_url and value.link_label %}
          <a class="design-system-link design-system-fi-arrow-right-line design-system-link--icon-right"
             href="{{ value.link_url }}">{{ value.link_label }}</a>
        {% endif %}
      </div>
    {% else %}
      <div class="design-system-col-12 design-system-col-sm{{ -12|add:value.image_ratio }}">
        {{ value.text|richtext }}
        {% if value.link is not None and value.link.url %}
          <a class="design-system-link design-system-fi-arrow-right-line design-system-link--icon-right"
             href="{{ value.link.url }}">{{ value.link.text }}</a>
        {% elif value.page and value.link_label %}
          <a class="design-system-link design-system-fi-arrow-right-line design-system-link--icon-right"
             href="{{ value.page.url }}">{{ value.link_label }}</a>
        {% elif value.link_url and value.link_label %}
          <a class="design-system-link design-system-fi-arrow-right-line design-system-link--icon-right"
             href="{{ value.link_url }}">{{ value.link_label }}</a>
        {% endif %}
      </div>
      <div class="design-system-col-12 design-system-col-sm-{{ value.image_ratio }}">
        <div class="bordered design-system-px-2w">{% image value.image original class="design-system-responsive-img" alt="" %}</div>
      </div>
    {% endif %}
  </div>
</div>
