Productos

{% assign collection = collections['brilliant-elite'] %}

<div style="margin:0 0 26px 0;">
  <h1 style="text-align:center; font-size:26px; font-weight:800; margin:10px 0 18px 0;">
    Productos
  </h1>

  <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; margin:10px auto; max-width:1100px;">
    {% for product in collection.products limit: 4 %}
      <div style="border:1px solid #e0e0e0; padding:15px; border-radius:10px; text-align:center;">
        <a href="{{ product.url }}" style="text-decoration:none; color:inherit;">
          <div style="position:relative; width:100%; padding-top:70%; overflow:hidden; border-radius:8px; background:#ffffff;">
            <img
              src="{{ product.featured_image | img_url: '600x' }}"
              alt="{{ product.title }}"
              style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;">
          </div>
          <h3 style="margin-top:10px; font-size:18px; font-weight:700;">
            {{ product.title }}
          </h3>
        </a>
      </div>
    {% endfor %}
  </div>
</div>