<div class="c-project-grid">
    <div class="c-project-grid__item c-project-grid__item--1">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--2"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/21/1032/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--2">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--3"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/22/763/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--3">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--4"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/23/1032/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--4">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--5"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/24/763/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--5">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--6"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/25/1032/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--6">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--7"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/26/763/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--7">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--8"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/27/1032/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--8">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--9"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/28/763/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--9">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--10"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/29/1032/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--10">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--11"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/210/763/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--11">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--12"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/211/1032/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--12">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--13"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/212/763/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--13">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--14"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/213/1032/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--14">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--15"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/214/763/763" alt="">
        </a>
    </div>
    <div class="c-project-grid__item c-project-grid__item--15">
        <a class="c-project-grid__link" href="#">
            <div class="c-project-grid__bg bgColor--16"></div>
            <img class="c-project-grid__img" src="https://picsum.photos/id/215/1032/763" alt="">
        </a>
    </div>
</div>
<div class="c-project-grid">
{% for i in 1..15 %}
  <div class="c-project-grid__item c-project-grid__item--{{ i }}">
    <a class="c-project-grid__link" href="#">
      <div class="c-project-grid__bg bgColor--{{ (i%24)+1 }}"></div>
      {% if i is odd %}
      <img class="c-project-grid__img" src="https://picsum.photos/id/2{{ i }}/1032/763" alt="">
      {% else %}
      <img class="c-project-grid__img" src="https://picsum.photos/id/2{{ i }}/763/763" alt="">
      {% endif %}
    </a>
  </div>
{% endfor %}
</div>
/* No context defined. */

No notes defined.