{{- $c := site.Data.content -}}
<section class="work" id="work" aria-labelledby="work-h">
    <div class="work-head">
      <h2 id="work-h" class="rv" data-words>{{ $c.work.h2_1 }}</h2>
      <p class="small rv" data-lines>{{ $c.work.p_2 }}</p>
    </div>
    <div class="tl" data-tl>
      <div class="tl-line"></div>
      <div class="tl-prog" data-tl-prog></div>
      <article class="item" style="--c: 1 / span 3">
        <p class="year">{{ $c.work.p_3 }}</p>
        <figure><div class="ph bl rv"><img src="{{ ($c.work.img_4_image | relURL) }}" width="1200" height="800" alt="{{ $c.work.img_4_alt }}" loading="lazy"></div><h3>{{ $c.work.h3_5_html | safeHTML }}</h3></figure>
      </article>
      <article class="item" style="--c: 3 / span 6">
        <p class="year">{{ $c.work.p_6 }}</p>
        <figure><div class="ph bl rv"><img src="{{ ($c.work.img_7_image | relURL) }}" width="1200" height="800" alt="{{ $c.work.img_7_alt }}" loading="lazy"></div><h3>{{ $c.work.h3_8_html | safeHTML }}</h3></figure>
      </article>
      <article class="item l" style="--c: 10 / span 3">
        <p class="year">{{ $c.work.p_9 }}</p>
        <figure><div class="ph bl rv"><img src="{{ ($c.work.img_10_image | relURL) }}" width="1200" height="800" alt="{{ $c.work.img_10_alt }}" loading="lazy"></div><h3>{{ $c.work.h3_11_html | safeHTML }}</h3></figure>
      </article>
      <article class="item" style="--c: 4 / span 3">
        <p class="year">{{ $c.work.p_12 }}</p>
        <figure><div class="ph bl rv"><img src="{{ ($c.work.img_13_image | relURL) }}" width="800" height="1200" alt="{{ $c.work.img_13_alt }}" loading="lazy"></div><h3>{{ $c.work.h3_14_html | safeHTML }}</h3></figure>
      </article>
      <article class="item l" style="--c: 8 / span 5">
        <p class="year">{{ $c.work.p_15 }}</p>
        <figure><div class="ph bl rv"><img src="{{ ($c.work.img_16_image | relURL) }}" width="1200" height="800" alt="{{ $c.work.img_16_alt }}" loading="lazy"></div><h3>{{ $c.work.h3_17_html | safeHTML }}</h3></figure>
      </article>
      <article class="item" style="--c: 2 / span 3">
        <p class="year">{{ $c.work.p_18 }}</p>
        <figure><div class="ph bl rv"><img src="{{ ($c.work.img_19_image | relURL) }}" width="800" height="1200" alt="{{ $c.work.img_19_alt }}" loading="lazy"></div><h3>{{ $c.work.h3_20_html | safeHTML }}</h3></figure>
      </article>
      <article class="item" style="--c: 4 / span 6">
        <p class="year">{{ $c.work.p_21 }}</p>
        <figure><div class="ph bl rv"><img src="{{ ($c.work.img_22_image | relURL) }}" width="1200" height="800" alt="{{ $c.work.img_22_alt }}" loading="lazy"></div><h3>{{ $c.work.h3_23_html | safeHTML }}</h3></figure>
      </article>
      <article class="item l" style="--c: 8 / span 5">
        <p class="year">{{ $c.work.p_24 }}</p>
        <figure><div class="ph bl rv"><img src="{{ ($c.work.img_25_image | relURL) }}" width="1200" height="800" alt="{{ $c.work.img_25_alt }}" loading="lazy"></div><h3>{{ $c.work.h3_26_html | safeHTML }}</h3></figure>
      </article>
    </div>
  </section>