{{# Simple one-column grid for mobile #}}
<div class="grid grid-cols-1 gap-y-8 sm:hidden">
    {{ collection:galleries taxonomy:categories="nu" }}
    <a-components.gallery-card
        :image="preview_image"
        :$title
        :$prix
        :$matiere
        :$taille
        :$url
        :$categories
    />
    {{ /collection:galleries }}
</div>

{{# Two-column grid for desktop #}}
<div class="sm:grid sm:grid-cols-2 sm:gap-x-16 lg:gap-x-36 2xl:gap-x-48">
{{ collection:galleries taxonomy:categories="nu" }}
    <a-components.gallery-card
        :image="preview_image"
        :$title
        :$prix
        :$matiere
        :$taille
        :$url
        :$categories
        :align-end="_offset ? (index | mod(2)) : true"
    />
{{ /collection:galleries }}
</div>