---
import type { FindItem } from '../lib/find-items';
import FindCard from './FindCard.astro';

interface Props {
  items: FindItem[];
}
const { items } = Astro.props;
---

<ul class="finds-grid">
  {items.map((item) => (
    <li>
      <FindCard item={item} />
    </li>
  ))}
</ul>

<style>
  .finds-grid {
    column-count: 3;
    column-gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (max-width: 880px) { .finds-grid { column-count: 2; } }
  @media (max-width: 520px) { .finds-grid { column-count: 1; } }

  .finds-grid > li {
    break-inside: avoid;
    display: block;
    margin: 0 0 1rem;
  }
</style>