{{- $c := site.Data.content -}}
<section class="cards frame" id="services" aria-label="Services">
    <div class="gap"></div>
    <article class="card coral"><h2>{{ $c.services.h2_1 }}</h2><p>{{ $c.services.p_2 }}</p><button class="pill" type="button" data-write="Sample design project ($99 offer)">{{ $c.services.button_3 }}</button></article>
    <article class="card sun"><h2>{{ $c.services.h2_4 }}</h2><ul><li>{{ $c.services.li_5 }}</li><li>{{ $c.services.li_6 }}</li><li>{{ $c.services.li_7 }}</li><li>{{ $c.services.li_8 }}</li></ul><button class="pill" type="button" data-write="Style, colours and textures">{{ $c.services.button_9 }}</button></article>
    <article class="card mint"><h2>{{ $c.services.h2_10 }}</h2><p>{{ $c.services.p_11 }}</p><button class="pill" type="button" data-write="Architectural project for a house">{{ $c.services.button_12 }}</button></article>
    <div class="gap"></div>
    <div class="gap"></div>
    <article class="card sun"><h2>{{ $c.services.h2_13 }}</h2><p>{{ $c.services.p_14 }}</p><button class="pill" type="button" data-write="3D design project">{{ $c.services.button_15 }}</button></article>
    <article class="card mint"><h2>{{ $c.services.h2_16 }}</h2><ul><li>{{ $c.services.li_17 }}</li><li>{{ $c.services.li_18 }}</li></ul><button class="pill" type="button" data-write="3D visualisation">{{ $c.services.button_19 }}</button></article>
    <article class="card sky" id="plan-online"><h2>{{ $c.services.h2_20 }}</h2><ul><li>{{ $c.services.li_21 }}</li><li>{{ $c.services.li_22 }}</li><li>{{ $c.services.li_23 }}</li><li>{{ $c.services.li_24 }}</li></ul><button class="pill" type="button" data-write="Online floor plan tool">{{ $c.services.button_25 }}</button></article>
    <div class="gap"></div>
    <div class="gap"></div>
    <article class="card mint"><h2>{{ $c.services.h2_26 }}</h2><p>{{ $c.services.p_27 }}</p><button class="pill" type="button" data-write="Site master plan">{{ $c.services.button_28 }}</button></article>
    <article class="card coral"><h2>{{ $c.services.h2_29 }}</h2><p>{{ $c.services.p_30 }}</p><button class="pill" type="button" data-write="Measuring guide">{{ $c.services.button_31 }}</button></article>
    <article class="card sun"><h2>{{ $c.services.h2_32 }}</h2><p>{{ $c.services.p_33 }}</p><button class="pill" type="button" data-write="A question">{{ $c.services.button_34 }}</button></article>
    <div class="gap"></div>
  </section>