<div class="space-y-8 sm:space-y-0 sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-8 md:gap-10 lg:gap-12">
    <div class="feature">
        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#globe" />
        </svg>

        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Competitive</h4>
        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam suscipit culpa sit vero eius voluptate? Repellendus fugit beatae eveniet!</p>
    </div>
    <div class="feature">
        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#key" />
        </svg>

        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Accessible</h4>
        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus reprehenderit fuga. Eligendi provident ipsa dolor, consequatur soluta obcaecati? Error!</p>
    </div>
    <div class="feature">
        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#user" />
        </svg>

        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Personnal</h4>
        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita sequi cumque odio perspiciatis soluta iste voluptatem eveniet magni assumenda distinctio.</p>
    </div>
    <div class="feature">
        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#gift" />
        </svg>

        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Approachable</h4>
        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam suscipit culpa sit vero eius voluptate? Repellendus fugit beatae eveniet!</p>
    </div>
    <div class="feature">
        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#bulb" />
        </svg>

        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Original</h4>
        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus reprehenderit fuga. Eligendi provident ipsa dolor, consequatur soluta obcaecati? Error!</p>
    </div>
    <div class="feature">
        <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../icons.svg#lightning" />
        </svg>

        <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Fast</h4>
        <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita sequi cumque odio perspiciatis soluta iste voluptatem eveniet magni assumenda distinctio.</p>
    </div>
</div>
<div class="space-y-8 sm:space-y-0 sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-8 md:gap-10 lg:gap-12">
    {%- for feature in features -%}
        {% render '@feature', feature, true %}
    {%- endfor -%}
</div>
{
  "features": [
    {
      "icon": "globe",
      "title": "Competitive",
      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam suscipit culpa sit vero eius voluptate? Repellendus fugit beatae eveniet!"
    },
    {
      "icon": "key",
      "title": "Accessible",
      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus reprehenderit fuga. Eligendi provident ipsa dolor, consequatur soluta obcaecati? Error!"
    },
    {
      "icon": "user",
      "title": "Personnal"
    },
    {
      "icon": "gift",
      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam suscipit culpa sit vero eius voluptate? Repellendus fugit beatae eveniet!"
    },
    {
      "icon": "bulb",
      "title": "Original",
      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus reprehenderit fuga. Eligendi provident ipsa dolor, consequatur soluta obcaecati? Error!"
    },
    {
      "icon": "lightning",
      "title": "Fast"
    }
  ]
}

No notes defined.