Link Card Grid

<div class="ws-link-card grid grid-cols-1 gap-4 sm:grid-cols-2">
  <a href="#" class="group rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
    <div class="flex items-start justify-between">
      <div>
        <h3 class="text-base font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Installation</h3>
        <p class="mt-1 text-sm text-[var(--ws-link-card-text-soft)]">Step-by-step setup guide for all platforms.</p>
      </div>
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-link-card-text-soft)] transition group-hover:translate-x-1 group-hover:text-[var(--ws-link-card-accent)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
      </svg>
    </div>
  </a>

  <a href="#" class="group rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
    <div class="flex items-start justify-between">
      <div>
        <h3 class="text-base font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Configuration</h3>
        <p class="mt-1 text-sm text-[var(--ws-link-card-text-soft)]">Customize settings and environment variables.</p>
      </div>
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-link-card-text-soft)] transition group-hover:translate-x-1 group-hover:text-[var(--ws-link-card-accent)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
      </svg>
    </div>
  </a>

  <a href="#" class="group rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
    <div class="flex items-start justify-between">
      <div>
        <h3 class="text-base font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Components</h3>
        <p class="mt-1 text-sm text-[var(--ws-link-card-text-soft)]">Browse the full component library and examples.</p>
      </div>
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-link-card-text-soft)] transition group-hover:translate-x-1 group-hover:text-[var(--ws-link-card-accent)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
      </svg>
    </div>
  </a>

  <a href="#" class="group rounded-xl border border-[var(--ws-link-card-border)] bg-[var(--ws-link-card-bg)] p-6 transition hover:border-[var(--ws-link-card-hover-border)] hover:shadow-md">
    <div class="flex items-start justify-between">
      <div>
        <h3 class="text-base font-semibold text-[var(--ws-link-card-text)] group-hover:text-[var(--ws-link-card-accent)]">Deployment</h3>
        <p class="mt-1 text-sm text-[var(--ws-link-card-text-soft)]">Ship to production with zero-config hosting.</p>
      </div>
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-link-card-text-soft)] transition group-hover:translate-x-1 group-hover:text-[var(--ws-link-card-accent)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd" />
      </svg>
    </div>
  </a>
</div>