<!-- Default -->
<div class="Point">
    <div class="Point-content">
        <h2 class="Point-title Heading Heading--medium"><span class="u-underline-animated">No number</span></h2>
        <p class="Point-body">The physical working environment supports collaborative design activities</p>
    </div>
</div>

<!-- One -->
<div class="Point Point--1">

    <svg xmlns="http://www.w3.org/2000/svg" class="number" viewBox="0 0 106 151" height="150px" color="#00D494">
        <title>1</title>
        <defs>
            <mask width="160%" height="160%" x="-20%" y="-20%" id="number-mask--1">
                <path fill="#23d8a0" d="M32 15l9 32 26-6v109h39V0H73z" />
            </mask>
        </defs>
        <path mask="url(#number-mask--1)" class="number-path number-path--1" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="47" d="M28.948,25.88,107.381,9.951c-1.5.306-14.311-13.327-14.311-13.327L87.4-3.188,84.022-1.311V153.312" />
    </svg>
    <div class="Point-content">
        <h2 class="Point-title Heading Heading--medium"><span class="u-underline-animated">Empowerment</span></h2>
        <p class="Point-body">The physical working environment supports collaborative design activities</p>
    </div>
</div>

<!-- Two -->
<div class="Point Point--2">

    <svg xmlns="http://www.w3.org/2000/svg" class="number" viewBox="0 0 106 151" height="150px" color="#00D494">
        <title>2</title>
        <defs>
            <mask width="160%" height="160%" x="-20%" y="-20%" id="number-mask--2">
                <path fill="#23d8a0" d="M105 150v-36H59l20-20c15-16 23-29 23-46q0-22-14-34Q73 1 52 1C30 1 10 13 1 35l32 18c4-10 11-15 19-15 9 0 13 4 13 12 0 6-4 12-14 22L3 123v27z" />
            </mask>
        </defs>
        <path mask="url(#number-mask--2)" class="number-path number-path--2" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="47" d="M13.716,46.179S38.775,7.318,67.775,23.318s.206,47,.206,47l-63,67h108" />
    </svg>
    <div class="Point-content">
        <h2 class="Point-title Heading Heading--medium"><span class="u-underline-animated">Environment</span></h2>
        <p class="Point-body">The physical working environment supports collaborative design activities</p>
    </div>
</div>

<!-- Three -->
<div class="Point Point--3">

    <svg xmlns="http://www.w3.org/2000/svg" class="number" viewBox="0 0 106 151" height="150px" color="#00D494">
        <title>3</title>
        <defs>
            <mask width="160%" height="160%" x="-20%" y="-20%" id="number-mask--3">
                <path fill="#23d8a0" d="M98.275,30.641V1.258H3.52V36.893H52.459L29.135,65.442,43.5,86.7h7.914c10.621,0,16.452,5.21,16.452,13.546S62.039,114,51.418,114c-10.2,0-16.868-5-19.992-15.213L-1.061,117.332c8.33,21.673,28.322,32.926,52.479,32.926,15.2,0,27.906-4.168,38.11-12.712s15.411-20.631,15.411-36.26c0-20.006-12.5-34.8-31.03-40.637Z" />
            </mask>
        </defs>
        <path mask="url(#number-mask--3)" class="number-path number-path--3" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="42" d="M-.51,16.317H97.9l-6.757-10.3-58,73.1s10.98-8.276,31.253-3.715S85.514,91.228,86.921,96.86s-.374,28.917-19.8,34.83S21.318,126.054,14,106.064" />
    </svg>
    <div class="Point-content">
        <h2 class="Point-title Heading Heading--medium"><span class="u-underline-animated">Research</span></h2>
        <p class="Point-body">The physical working environment supports collaborative design activities</p>
    </div>
</div>

<div class="Point{% if pointModifiers %} Point--{{pointModifiers}}{% endif %}">
    {% if pointModifiers %} 
    {% include '@numbers' with {
        number: pointModifiers,
    }%}
    {% endif %}
    <div class="Point-content">
        <h2 class="Point-title Heading Heading--medium"><span class="u-underline-animated">{{ pointHeading }}</span></h2>
        <p class="Point-body">{{ pointBody }}</p>
    </div>
</div>
/* Default */
{
  "pointHeading": "No number",
  "pointBody": "The physical working environment supports collaborative design activities"
}

/* One */
{
  "pointModifiers": "1",
  "pointHeading": "Empowerment",
  "pointBody": "The physical working environment supports collaborative design activities"
}

/* Two */
{
  "pointModifiers": "2",
  "pointHeading": "Environment",
  "pointBody": "The physical working environment supports collaborative design activities"
}

/* Three */
{
  "pointModifiers": "3",
  "pointHeading": "Research",
  "pointBody": "The physical working environment supports collaborative design activities"
}

There are no notes for this item.