{{- $c := site.Data.content -}}
<section class="services" id="services" aria-labelledby="svc-h">
    <div class="wrap">
      <div class="sec-head">
        <div>
          <span class="eyebrow rv">{{ $c.services.span_1 }}</span>
          <h2 id="svc-h" class="rv" style="--d:.1s">{{ $c.services.h2_2 }}</h2>
        </div>
        <p class="rv" style="--d:.2s">{{ $c.services.p_3 }}</p>
      </div>
      <div class="svc-grid">
        <article class="svc rv">
          <div class="ph"><img src="{{ ($c.services.img_4_image | relURL) }}" alt="{{ $c.services.img_4_alt }}" width="1600" height="1067" loading="lazy"></div>
          <h3>{{ $c.services.h3_5 }}</h3>
          <p>{{ $c.services.p_6 }}</p>
          <a class="pick" href="#book" data-visit="Wellness exam">{{ $c.services.text_7 }} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
        </article>
        <article class="svc c2 rv" style="--d:.1s">
          <div class="ph"><img src="{{ ($c.services.img_8_image | relURL) }}" alt="{{ $c.services.img_8_alt }}" width="1600" height="1067" loading="lazy"></div>
          <h3>{{ $c.services.h3_9 }}</h3>
          <p>{{ $c.services.p_10 }}</p>
          <a class="pick" href="#book" data-visit="Vaccinations">{{ $c.services.text_11 }} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
        </article>
        <article class="svc c3 rv" style="--d:.2s">
          <div class="ph"><img src="{{ ($c.services.img_12_image | relURL) }}" alt="{{ $c.services.img_12_alt }}" width="1600" height="1067" loading="lazy"></div>
          <h3>{{ $c.services.h3_13 }}</h3>
          <p>{{ $c.services.p_14 }}</p>
          <a class="pick" href="#book" data-visit="Dental care">{{ $c.services.text_15 }} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
        </article>
        <article class="svc c4 rv">
          <div class="ph"><img src="{{ ($c.services.img_16_image | relURL) }}" alt="{{ $c.services.img_16_alt }}" width="1600" height="1067" loading="lazy"></div>
          <h3>{{ $c.services.h3_17 }}</h3>
          <p>{{ $c.services.p_18 }}</p>
          <a class="pick" href="#book" data-visit="Surgery consult">{{ $c.services.text_19 }} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
        </article>
        <article class="svc c5 rv" style="--d:.1s">
          <div class="ph"><img src="{{ ($c.services.img_20_image | relURL) }}" alt="{{ $c.services.img_20_alt }}" width="1600" height="1067" loading="lazy"></div>
          <h3>{{ $c.services.h3_21 }}</h3>
          <p>{{ $c.services.p_22 }}</p>
          <a class="pick" href="#book" data-visit="Puppy or kitten package">{{ $c.services.text_23 }} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
        </article>
        <article class="svc c6 rv" style="--d:.2s">
          <div class="ph"><img src="{{ ($c.services.img_24_image | relURL) }}" alt="{{ $c.services.img_24_alt }}" width="1600" height="1067" loading="lazy"></div>
          <h3>{{ $c.services.h3_25 }}</h3>
          <p>{{ $c.services.p_26 }}</p>
          <a class="pick" href="#book" data-visit="House call">{{ $c.services.text_27 }} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
        </article>
      </div>
    </div>
  </section>