Collection

<section class="thin-collection" aria-labelledby="collection-title">
  <header class="thin-collection-header">
    <p>Spring carry</p>
    <h1 id="collection-title">Made to go everywhere</h1>
    <p>Durable bags for daily routes and longer departures.</p>
  </header>
  <div class="thin-collection-layout">
    <aside>
      <form class="thin-product-filters" action="/collections/bags" method="get">
        <fieldset>
          <legend>Availability</legend>
          <div class="thin-choice-row">
            <input class="thin-choice" id="availability-in-stock" type="checkbox" name="availability" value="in-stock">
            <label for="availability-in-stock">In stock</label>
          </div>
        </fieldset>
        <button class="thin-button">Apply filters</button>
        <a href="/collections/bags">Clear filters</a>
      </form>
    </aside>
    <div class="thin-stack">
      <p class="thin-results-summary">
        <strong>24 products</strong>
        <span aria-live="polite">Sorted by featured</span>
      </p>
      <div class="thin-product-grid">
        <article class="thin-product-card">
          <a href="/products/tote">
            <img src="/products/tote.jpg" alt="Blue canvas tote">
          </a>
          <div class="thin-product-card-body">
            <h2><a href="/products/tote">Canvas tote</a></h2>
            <p class="thin-product-price">$68.00</p>
            <p class="thin-inventory-status">In stock</p>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>