solutions.html

<!-- _includes/solutions.html -->
<div>
    <div class="row has-text-centered">
        <div class="subtitle is-2 anchored" id="{{ page.solutions.title | strip_html | slugify }}">{{ page.solutions.title }}</div>
        <div class="description is-size-5">{{ page.solutions.description }}</div>
    </div>
    <div>
        <div class="card-columns columns-3-desktop columns-2-tablet columns-1-mobile">

        {%- assign max_col = 3 -%}
        {%- assign max_row = 3 -%}

        {%- assign max_row_range = 3 | minus:1 -%}
        {%- assign max_col_range = 3 | minus:1 -%}

        {% for row in (0..max_row_range) %}
            {% for col in (0..max_col_range) %}

                {%- assign col_offset = max_col | times:col -%}
                {%- assign col_idx = row | plus:col_offset -%}

                {%- assign row_offset = max_row | times:row -%}
                {%- assign row_idx = col | plus:row_offset -%}

                {%- if row_idx >= site.data.solutions.size -%}
                    {%- break -%}
                {%- endif %}

                {%- assign solution = site.data.solutions[col_idx] -%}

            <div class="slicer-solution card">
                <div class="columns">
                    <div class="column is-one-third has-text-right has-text-centered-mobile">
                        <img src="{{ solution.image }}">
                    </div>
                    <div class="column">
                        <div class="subtitle is-4" style="margin-bottom:0">{{ solution.name }}</div>
                        <hr>
                        <div class="description">{{ solution.description }}</div>
                        <a href="{{ solution.link }}" onclick="this.blur();" class="button is-small">
                            <span class="icon is-small">
                               <i class="{{ page.solutions.button_icon }}"></i>
                            </span>
                            <span>{{ page.solutions.button_text }}</span>
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% endfor %}
        </div>
    </div>
</div>