@layer components {
  .home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; gap: var(--space-3); }

  .home-card {
    align-content: start;

    & .card { padding: 0; border: 0; background: none; box-shadow: none; }
  }

  .home-card__title a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;

    & .icon { color: var(--ink-faint); }
  }

  .home-edit {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius-card);
    cursor: grab;

    & .home-card { pointer-events: none; }
  }

  .home-edit__bar { display: flex; align-items: center; justify-content: space-between; color: var(--ink-muted); }

  .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }

  @media (width >= 1400px) {
    .home-card--wide, .home-edit:has(.home-card--wide) { grid-column: span 2; }
    .home-edit .home-card--wide { grid-column: auto; }
  }
}