{# Define if sidebar is shown in the page #}
{% set show_image = header_var('show_pageimage')|defined(true) %}

{# Define if the primary image and the attributes of width and height are shown #}
{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v) => (v.type == 'image' or v.type == 'vector'))|first %}
{% set img_width = header_var('image_width')|default(1038) %}
{% set img_height = header_var('image_height')|default(437) %}

{# Set title and subtitle #}
{% set title = page.title|raw %}
{% set subtitle = page.header.subtitle|raw %}

{# Set columns for features page #}
{% set columns = page.header.layout == 'standard' ? 'col-4 col-6-medium col-12-small' : 'col-6 col-12-small'  %}

<section id="features">
  <header>
    <h2>{{ title }}</h2>
    {% if subtitle %}
      <p>{{ subtitle }}</p>
    {% endif %}
  </header>
  
  {% if show_image and image %}
    {{ image.cropZoom(img_width,img_height).loading('lazy').attribute('decoding','async').html(title, title, 'image featured')|raw }}
  {% endif %}

  {{ page.content|raw }}

  <div class="row gtr-uniform">
    {% for feature in page.header.features %}
      <div class="{{columns}}">
        <article class="box">
          {% if feature.image %}
            <span class="image fit"><img src="{{page.media[feature.image].url}}" alt="{{feature.title}}"/></span>
          {% endif %}
          <header>
            {% if feature.title %}
              <h3>{{feature.title|raw}}</h3>
            {% endif %}
            {% if feature.text %}
              <p>{{feature.text|raw}}</p>
            {% endif %}
            {% if feature.buttonurl %}
              <p>
                <a href="{{feature.buttonurl}}" class="button fit" target={% if feature.buttonurl_target %} "_blank" {% endif%}>{{feature.buttontext|raw}}</a>
              </p>
            {% endif %}
          </header>
        </article>
      </div>
    {% endfor %}
  </div>
</section>
<br>