{{- $c := site.Data.content -}}
<div id="work" data-work>
   <div class="p-stage">
    <article class="project" aria-labelledby="p1-t">
      <img class="cover" src="{{ ($c.work.img_1_image | relURL) }}" alt="{{ $c.work.img_1_alt }}" loading="lazy" decoding="async">
      <div class="bar"><p class="label">{{ $c.work.p_2 }}</p><div><h2 class="d" id="p1-t">{{ $c.work.h2_3 }}</h2><p>{{ $c.work.p_4 }}</p></div><a class="d" href="#contact">{{ $c.work.a_5_html | safeHTML }}</a></div>
    </article>
    <article class="project" aria-labelledby="p2-t" data-from="right">
      <img class="cover" src="{{ ($c.work.img_6_image | relURL) }}" alt="{{ $c.work.img_6_alt }}" loading="lazy" decoding="async">
      <div class="bar"><p class="label">{{ $c.work.p_7 }}</p><div><h2 class="d" id="p2-t">{{ $c.work.h2_8 }}</h2><p>{{ $c.work.p_9 }}</p></div><a class="d" href="#contact">{{ $c.work.a_10_html | safeHTML }}</a></div>
    </article>
    <article class="project" aria-labelledby="p3-t" data-from="bottom">
      <img class="cover" src="{{ ($c.work.img_11_image | relURL) }}" alt="{{ $c.work.img_11_alt }}" loading="lazy" decoding="async">
      <div class="bar"><p class="label">{{ $c.work.p_12 }}</p><div><h2 class="d" id="p3-t">{{ $c.work.h2_13 }}</h2><p>{{ $c.work.p_14 }}</p></div><a class="d" href="#contact">{{ $c.work.a_15_html | safeHTML }}</a></div>
    </article>
    <article class="project" aria-labelledby="p4-t" data-from="left">
      <img class="cover" src="{{ ($c.work.img_16_image | relURL) }}" alt="{{ $c.work.img_16_alt }}" loading="lazy" decoding="async">
      <div class="bar"><p class="label">{{ $c.work.p_17 }}</p><div><h2 class="d" id="p4-t">{{ $c.work.h2_18 }}</h2><p>{{ $c.work.p_19 }}</p></div><a class="d" href="#contact">{{ $c.work.a_20_html | safeHTML }}</a></div>
    </article>
   </div>
  </div>