@layer components {
  .capacity-card__months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .capacity-card__month { display: grid; gap: 2px; }

  .capacity-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);

    & > .progress, & > .capacity-row__meta { grid-column: 1 / -1; }
  }

  .card__title + .capacity-row { border-top: 0; }
  .capacity-row__name { font-weight: 600; }
  .capacity-row__value { font-weight: 600; font-variant-numeric: tabular-nums; }
  .capacity-row__value--large { font-size: var(--text-lg); font-weight: 650; }

  .capacity-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }

  .free {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--good);
    font-variant-numeric: tabular-nums;
  }

  .free--over { color: var(--danger); }
  .free__label { font-size: var(--text-xs); font-weight: 600; }
}