---
// Grid-group template — for a set of sibling cards separated by hairlines.
//
// Note the separator technique: `gap: 1px` over a coloured parent background.
// That is DELIBERATE house style throughout this site, not a workaround.
// Do not "fix" it into `border`.

interface Props {
  label: string;
  /** Number of columns at the widest breakpoint. */
  columns?: number;
}

const { label, columns = 3 } = Astro.props;
---

<section class="group" aria-label={label}>
  <div class="grid" style={`--columns: ${columns}`}>
    <slot />
  </div>
</section>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: 1px; /* hairline separators, drawn by the parent background */
    background: var(--line);
  }

  /* Children paint their own background, which is what makes the 1px show. */
  .grid > :global(*) {
    background: var(--paper);
  }

  @media (max-width: 800px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }
</style>