MARKET — browse secondhand listings

<header class="navbar">
  <a class="nav-brand" href="#">MARKET</a>
  <ul class="nav-links" id="site-nav">
    <li><a class="nav-link" href="#">Browse</a></li>
    <li><a class="nav-link" href="#">Sell</a></li>
  </ul>
  <span class="nav-spacer"></span>
  <button class="hamburger" type="button" data-menu-toggle="#site-nav"
    aria-controls="site-nav" aria-expanded="false" aria-label="Toggle navigation">…</button>
  <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle dark mode">
    <span data-theme-state>Dark mode</span><span class="dot" aria-hidden="true"></span>
  </button>
  <div class="row">
    <button class="btn-outline btn-sm" type="button">Sign in</button>
    <button class="btn-primary btn-sm" type="button">List item</button>
  </div>
</header>

<div class="search input-group" role="search">
  <input class="input" type="search" placeholder="What are you looking for?" aria-label="Search listings">
  <button class="btn-primary" type="button">Search</button>
</div>

<div class="row">
  <button class="chip" type="button" aria-pressed="true">All</button>
  <button class="chip" type="button" aria-pressed="false">Electronics</button>
</div>

<div class="grid-auto">
  <article class="card">
    <div class="card-media" role="img" aria-label="MacBook Pro 14 inch">…</div>
    <div class="card-body">
      <span class="card-tag">Electronics</span>
      <h2 class="card-title">MacBook Pro 14"</h2>
      <div class="spread"><span>Like new</span><span class="price">$1,899</span></div>
    </div>
    <div class="card-actions"><button class="btn-primary btn-block" type="button">Contact seller</button></div>
  </article>
</div>