<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 xl:gap-8">
<div class="col-span-2 md:col-span-4 lg:col-span-2">
<div class="
group relative overflow-hidden h-full p-10 bg-cover aspect-auto
bg-brand-light/40 ">
<div class="
absolute inset-0
group-hover:bg-black/08
"></div>
<div class="relative h-full flex flex-col justify-between items-start gap-4">
<div class="flex flex-col items-start gap-4">
<div>
<svg class=" shrink-0" width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.5 12.9809C69.173 12.624 68.8396 12.273 68.5 11.9282C68.1658 11.5889 67.8256 11.2555 67.4795 10.9282C60.5384 4.36385 51.2471 0.258807 41 0.0073731C40.6677 -0.000781651 40.3343 -0.00488281 40 -0.00488281C39.6657 -0.00488281 39.3323 -0.000781651 39 0.0073731C28.7529 0.258807 19.4616 4.36385 12.5205 10.9282C12.1744 11.2555 11.8342 11.5889 11.5 11.9282C11.1604 12.273 10.827 12.624 10.5 12.9809C4.18854 19.8693 0.258114 28.9753 0.0122559 38.9951C0.00410116 39.3275 0 39.6608 0 39.9951C0 40.3294 0.00410116 40.6628 0.0122559 40.9951C0.258114 51.015 4.18854 60.1209 10.5 67.0094C10.827 67.3662 11.1604 67.7172 11.5 68.062C11.8342 68.4013 12.1744 68.7347 12.5205 69.062C19.4616 75.6264 28.7529 79.7314 39 79.9829C39.3323 79.991 39.6657 79.9951 40 79.9951C40.3343 79.9951 40.6677 79.991 41 79.9829C51.2471 79.7314 60.5384 75.6264 67.4795 69.062C67.8256 68.7347 68.1658 68.4013 68.5 68.062C68.8396 67.7172 69.173 67.3662 69.5 67.0094C75.8115 60.1209 79.7419 51.015 79.9877 40.9951C79.9959 40.6628 80 40.3294 80 39.9951C80 39.6608 79.9959 39.3275 79.9877 38.9951C79.7419 28.9753 75.8115 19.8693 69.5 12.9809ZM77.9871 38.9951C77.7627 30.3017 74.6202 22.3369 69.5 16.0399V38.9951H77.9871ZM67.5 37.6068V13.77C67.3595 13.6228 67.2179 13.4766 67.0751 13.3316C66.9416 13.1962 66.8072 13.0617 66.6718 12.9282L42.4406 12.9282L67.5 37.6068ZM41 10.9282L64.4783 10.9282C58.102 5.55252 49.9358 2.23872 41 2.00801V10.9282ZM39 2.00801V10.9282H15.5217C21.898 5.55252 30.0642 2.23872 39 2.00801ZM37.5594 12.9282H13.3282C13.1928 13.0617 13.0584 13.1962 12.9249 13.3316C12.7821 13.4766 12.6405 13.6228 12.5 13.77V37.6068L37.5594 12.9282ZM10.5 38.9951V16.0399C5.37983 22.3369 2.23734 30.3017 2.01289 38.9951H10.5ZM2.01289 40.9951C2.23734 49.6885 5.37983 57.6533 10.5 63.9503V40.9951H2.01289ZM12.5 42.3834V66.2202C12.6405 66.3675 12.7821 66.5136 12.9249 66.6586C13.0584 66.7941 13.1928 66.9285 13.3282 67.062H37.5594L12.5 42.3834ZM39 69.062H15.5217C21.898 74.4377 30.0642 77.7515 39 77.9822V69.062ZM41 77.9822C49.9358 77.7515 58.102 74.4377 64.4783 69.062H41V77.9822ZM42.4406 67.062H66.6718C66.8072 66.9285 66.9416 66.7941 67.0751 66.6586C67.2179 66.5136 67.3595 66.3675 67.5 66.2202V42.3834L42.4406 67.062ZM66.0594 38.9951L41 14.3165V38.9951H66.0594ZM39 38.9951V14.3165L13.9406 38.9951H39ZM13.9406 40.9951H39V65.6737L13.9406 40.9951ZM41 65.6737V40.9951H66.0594L41 65.6737ZM69.5 63.9503V40.9951H77.9871C77.7627 49.6885 74.6202 57.6533 69.5 63.9503Z" fill="currentColor" />
</svg>
</div>
<h3 class="h3 uppercase">
UTILITÉ
</h3>
<p class="text-body-base">
Nous nous concentrons sur les ingrédients strictement nécessaires au bénéfice recherché. Pas d'ingrédients superflus ou inutiles qui surchargent la peau.
</p>
</div>
<div class="mt-auto">
<a href="#" type="button" class=" btn btn-dark btn-outline btn-size-lg">
CTA Primaire
</a>
</div>
</div>
</div>
</div>
<div class="col-span-2 ">
<div class="
group relative overflow-hidden h-full p-10 bg-cover aspect-auto
bg-brand-light/72 ">
<div class="
absolute inset-0
group-hover:bg-black/08
"></div>
<div class="relative h-full flex flex-col justify-between items-start gap-4">
<div class="flex flex-col items-start gap-4">
<div>
<svg class=" shrink-0" width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.5 12.9809C69.173 12.624 68.8396 12.273 68.5 11.9282C68.1658 11.5889 67.8256 11.2555 67.4795 10.9282C60.5384 4.36385 51.2471 0.258807 41 0.0073731C40.6677 -0.000781651 40.3343 -0.00488281 40 -0.00488281C39.6657 -0.00488281 39.3323 -0.000781651 39 0.0073731C28.7529 0.258807 19.4616 4.36385 12.5205 10.9282C12.1744 11.2555 11.8342 11.5889 11.5 11.9282C11.1604 12.273 10.827 12.624 10.5 12.9809C4.18854 19.8693 0.258114 28.9753 0.0122559 38.9951C0.00410116 39.3275 0 39.6608 0 39.9951C0 40.3294 0.00410116 40.6628 0.0122559 40.9951C0.258114 51.015 4.18854 60.1209 10.5 67.0094C10.827 67.3662 11.1604 67.7172 11.5 68.062C11.8342 68.4013 12.1744 68.7347 12.5205 69.062C19.4616 75.6264 28.7529 79.7314 39 79.9829C39.3323 79.991 39.6657 79.9951 40 79.9951C40.3343 79.9951 40.6677 79.991 41 79.9829C51.2471 79.7314 60.5384 75.6264 67.4795 69.062C67.8256 68.7347 68.1658 68.4013 68.5 68.062C68.8396 67.7172 69.173 67.3662 69.5 67.0094C75.8115 60.1209 79.7419 51.015 79.9877 40.9951C79.9959 40.6628 80 40.3294 80 39.9951C80 39.6608 79.9959 39.3275 79.9877 38.9951C79.7419 28.9753 75.8115 19.8693 69.5 12.9809ZM77.9871 38.9951C77.7627 30.3017 74.6202 22.3369 69.5 16.0399V38.9951H77.9871ZM67.5 37.6068V13.77C67.3595 13.6228 67.2179 13.4766 67.0751 13.3316C66.9416 13.1962 66.8072 13.0617 66.6718 12.9282L42.4406 12.9282L67.5 37.6068ZM41 10.9282L64.4783 10.9282C58.102 5.55252 49.9358 2.23872 41 2.00801V10.9282ZM39 2.00801V10.9282H15.5217C21.898 5.55252 30.0642 2.23872 39 2.00801ZM37.5594 12.9282H13.3282C13.1928 13.0617 13.0584 13.1962 12.9249 13.3316C12.7821 13.4766 12.6405 13.6228 12.5 13.77V37.6068L37.5594 12.9282ZM10.5 38.9951V16.0399C5.37983 22.3369 2.23734 30.3017 2.01289 38.9951H10.5ZM2.01289 40.9951C2.23734 49.6885 5.37983 57.6533 10.5 63.9503V40.9951H2.01289ZM12.5 42.3834V66.2202C12.6405 66.3675 12.7821 66.5136 12.9249 66.6586C13.0584 66.7941 13.1928 66.9285 13.3282 67.062H37.5594L12.5 42.3834ZM39 69.062H15.5217C21.898 74.4377 30.0642 77.7515 39 77.9822V69.062ZM41 77.9822C49.9358 77.7515 58.102 74.4377 64.4783 69.062H41V77.9822ZM42.4406 67.062H66.6718C66.8072 66.9285 66.9416 66.7941 67.0751 66.6586C67.2179 66.5136 67.3595 66.3675 67.5 66.2202V42.3834L42.4406 67.062ZM66.0594 38.9951L41 14.3165V38.9951H66.0594ZM39 38.9951V14.3165L13.9406 38.9951H39ZM13.9406 40.9951H39V65.6737L13.9406 40.9951ZM41 65.6737V40.9951H66.0594L41 65.6737ZM69.5 63.9503V40.9951H77.9871C77.7627 49.6885 74.6202 57.6533 69.5 63.9503Z" fill="currentColor" />
</svg>
</div>
<h3 class="h3 uppercase">
PURETÉ
</h3>
<p class="text-body-base">
Nos ingrédients sont choisis parmi les plus purs (sans polluants). La recherche d'une éventuelle présence résiduelle de formols, phtalates, solvants, pesticides et métaux lourds est un critère de sélection important.
</p>
</div>
<div class="mt-auto">
<a href="#" type="button" class=" btn btn-dark btn-outline btn-size-lg btn-icons">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> CTA Primaire
</a>
</div>
</div>
</div>
</div>
<div class="col-span-2 ">
<div class="
group relative overflow-hidden h-full p-10 bg-cover aspect-auto
bg-brand-light/96 ">
<div class="
absolute inset-0
group-hover:bg-black/08
"></div>
<div class="relative h-full flex flex-col justify-between items-start gap-4">
<div class="flex flex-col items-start gap-4">
<div>
<svg class=" shrink-0" width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.5 12.9809C69.173 12.624 68.8396 12.273 68.5 11.9282C68.1658 11.5889 67.8256 11.2555 67.4795 10.9282C60.5384 4.36385 51.2471 0.258807 41 0.0073731C40.6677 -0.000781651 40.3343 -0.00488281 40 -0.00488281C39.6657 -0.00488281 39.3323 -0.000781651 39 0.0073731C28.7529 0.258807 19.4616 4.36385 12.5205 10.9282C12.1744 11.2555 11.8342 11.5889 11.5 11.9282C11.1604 12.273 10.827 12.624 10.5 12.9809C4.18854 19.8693 0.258114 28.9753 0.0122559 38.9951C0.00410116 39.3275 0 39.6608 0 39.9951C0 40.3294 0.00410116 40.6628 0.0122559 40.9951C0.258114 51.015 4.18854 60.1209 10.5 67.0094C10.827 67.3662 11.1604 67.7172 11.5 68.062C11.8342 68.4013 12.1744 68.7347 12.5205 69.062C19.4616 75.6264 28.7529 79.7314 39 79.9829C39.3323 79.991 39.6657 79.9951 40 79.9951C40.3343 79.9951 40.6677 79.991 41 79.9829C51.2471 79.7314 60.5384 75.6264 67.4795 69.062C67.8256 68.7347 68.1658 68.4013 68.5 68.062C68.8396 67.7172 69.173 67.3662 69.5 67.0094C75.8115 60.1209 79.7419 51.015 79.9877 40.9951C79.9959 40.6628 80 40.3294 80 39.9951C80 39.6608 79.9959 39.3275 79.9877 38.9951C79.7419 28.9753 75.8115 19.8693 69.5 12.9809ZM77.9871 38.9951C77.7627 30.3017 74.6202 22.3369 69.5 16.0399V38.9951H77.9871ZM67.5 37.6068V13.77C67.3595 13.6228 67.2179 13.4766 67.0751 13.3316C66.9416 13.1962 66.8072 13.0617 66.6718 12.9282L42.4406 12.9282L67.5 37.6068ZM41 10.9282L64.4783 10.9282C58.102 5.55252 49.9358 2.23872 41 2.00801V10.9282ZM39 2.00801V10.9282H15.5217C21.898 5.55252 30.0642 2.23872 39 2.00801ZM37.5594 12.9282H13.3282C13.1928 13.0617 13.0584 13.1962 12.9249 13.3316C12.7821 13.4766 12.6405 13.6228 12.5 13.77V37.6068L37.5594 12.9282ZM10.5 38.9951V16.0399C5.37983 22.3369 2.23734 30.3017 2.01289 38.9951H10.5ZM2.01289 40.9951C2.23734 49.6885 5.37983 57.6533 10.5 63.9503V40.9951H2.01289ZM12.5 42.3834V66.2202C12.6405 66.3675 12.7821 66.5136 12.9249 66.6586C13.0584 66.7941 13.1928 66.9285 13.3282 67.062H37.5594L12.5 42.3834ZM39 69.062H15.5217C21.898 74.4377 30.0642 77.7515 39 77.9822V69.062ZM41 77.9822C49.9358 77.7515 58.102 74.4377 64.4783 69.062H41V77.9822ZM42.4406 67.062H66.6718C66.8072 66.9285 66.9416 66.7941 67.0751 66.6586C67.2179 66.5136 67.3595 66.3675 67.5 66.2202V42.3834L42.4406 67.062ZM66.0594 38.9951L41 14.3165V38.9951H66.0594ZM39 38.9951V14.3165L13.9406 38.9951H39ZM13.9406 40.9951H39V65.6737L13.9406 40.9951ZM41 65.6737V40.9951H66.0594L41 65.6737ZM69.5 63.9503V40.9951H77.9871C77.7627 49.6885 74.6202 57.6533 69.5 63.9503Z" fill="currentColor" />
</svg>
</div>
<h3 class="h3 uppercase">
SÉCURITÉ
</h3>
<p class="text-body-base">
Nous n'utilisons que les éléments les plus sécuritaires pour garantir l'innocuité de nos produits quel que soit le type de peau. Et surtout rien de potentiellement nocif : silicone, huiles minérales ou colorants de synthèse, entre autres, sont bannis de nos formules.
</p>
</div>
<div class="mt-auto">
<a href="#" type="button" class=" btn btn-dark btn-outline btn-size-lg">
CTA Primaire
</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 xl:gap-8">
{% for card in cards %}
<div class="col-span-2 {% if cards|length == 2 %}{% if loop.first %}lg:col-start-2{% endif %}{% elseif loop.first %} md:col-span-4 lg:col-span-2{% endif %}">
{% include "@card_text" with {
card: card,
overlayHover: "group-hover:bg-black/08"
} only %}
</div>
{% endfor %}
</div>
{
"cards": [
{
"background": {
"type": "color",
"value": "bg-brand-light/40",
"theme": "dark"
},
"icon": {
"name": "library--random",
"class": "w-16 h-16"
},
"title": "UTILITÉ",
"content": "Nous nous concentrons sur les ingrédients strictement nécessaires au bénéfice recherché. Pas d'ingrédients superflus ou inutiles qui surchargent la peau.",
"cta": {
"label": "CTA Primaire",
"href": "#",
"color": "dark",
"type": "outline"
}
},
{
"background": {
"type": "color",
"value": "bg-brand-light/72",
"theme": "dark"
},
"icon": {
"name": "library--random",
"class": "w-16 h-16"
},
"title": "PURETÉ",
"content": "Nos ingrédients sont choisis parmi les plus purs (sans polluants). La recherche d'une éventuelle présence résiduelle de formols, phtalates, solvants, pesticides et métaux lourds est un critère de sélection important.",
"cta": {
"label": "CTA Primaire",
"href": "#",
"color": "dark",
"type": "outline",
"icon_type": "leading-icon"
}
},
{
"background": {
"type": "color",
"value": "bg-brand-light/96",
"theme": "dark"
},
"icon": {
"name": "library--random",
"class": "w-16 h-16"
},
"title": "SÉCURITÉ",
"content": "Nous n'utilisons que les éléments les plus sécuritaires pour garantir l'innocuité de nos produits quel que soit le type de peau. Et surtout rien de potentiellement nocif : silicone, huiles minérales ou colorants de synthèse, entre autres, sont bannis de nos formules.",
"cta": {
"label": "CTA Primaire",
"href": "#",
"color": "dark",
"type": "outline"
}
}
]
}
No notes defined.