IconCards icon

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

interface Props {
  cards?: Card[];
  cols?: 2 | 3 | 4;
}

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

<section class:list={['bl-section', 'ic-section']}>
  <div class="bl-inner">
    <div class="ic-grid" style={`--cols: ${cols}`}>
      {cards.map(card => (
        <div class="ic-card">
          {card.icon && (
            <div class="ic-icon-wrap">
              <span class="ic-icon" aria-hidden="true">{card.icon}</span>
            </div>
          )}
          <h3 class="ic-title">{card.title}</h3>
          {card.desc && <p class="ic-desc">{card.desc}</p>}
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .ic-section { background: var(--color-bg, #fff); }
  .ic-grid {
    --cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 20px;
  }
  @media (max-width: 640px) { .ic-grid { grid-template-columns: 1fr; } }
  @media (min-width: 641px) and (max-width: 1023px) { .ic-grid { grid-template-columns: 1fr 1fr; } }
  .ic-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .2s, box-shadow .2s;
    cursor: default;
  }
  .ic-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px #6366f11f; }
  .ic-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #f0f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ic-icon { font-size: 1.6rem; }
  .ic-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-primary, #0a0a0a); }
  .ic-desc { margin: 0; font-size: 1rem; line-height: 1.6; color: #555; }
</style>