IconColumns icon

---
interface Column {
  icon?: string;
  title: string;
  desc?: string;
}

interface Props {
  headline?: string;
  columns?: Column[];
  cols?: 2 | 3 | 4;
}

const {
  headline,
  columns = [],
  cols = 3,
} = Astro.props;
---

<section class:list={['bl-section', 'icol-section']}>
  <div class="bl-inner">
    {headline && <h2 class="icol-headline">{headline}</h2>}
    <div class="icol-grid" style={`--cols: ${cols}`}>
      {columns.map(col => (
        <div class="icol-col">
          {col.icon && <div class="icol-icon" aria-hidden="true">{col.icon}</div>}
          <h3 class="icol-title">{col.title}</h3>
          {col.desc && <p class="icol-desc">{col.desc}</p>}
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .icol-section { background: var(--color-bg, #fff); }
  .icol-headline {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 40px;
  }
  .icol-grid {
    --cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 32px;
  }
  @media (max-width: 640px) { .icol-grid { grid-template-columns: 1fr; } }
  @media (min-width: 641px) and (max-width: 1023px) { .icol-grid { grid-template-columns: 1fr 1fr; } }
  .icol-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .icol-icon { font-size: 2.2rem; line-height: 1; }
  .icol-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-primary, #0a0a0a); }
  .icol-desc { margin: 0; font-size: 1rem; line-height: 1.65; color: #555; }
</style>