

<div class="c-swatches">
  {% grid %}

  {% for gradientName, gradient in gradients %}

      {% cell "u-1/2 u-1/3@tiny u-1/4@small" %}
        <div class="c-swatch">

            <div class="c-swatch__inner">

              <div class="c-swatch__front t-{{ gradientName }}">
                <div class="u-font-size-base">
                  .t-{{ gradientName }}
                </div>

                <!-- <div style="color: white">
                  {% for name, value in gradient %}
                    {% if loop.last %}
                      to
                    {% endif %}
                      {{ value|rgb2hex }}
                  {% endfor %}
                </div> -->
              </div>

            </div>


        </div>
      {% endcell %}

    {% endfor %}
  {% endgrid %}

</div>
