@layer components {
  .plans {
    display: grid;
    
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .plan {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-4);
  }

  .plan--on { border-color: var(--accent); }

  .plan__head { display: grid; gap: var(--space-2); }

  .plan__name {
    margin: 0;
    font-size: var(--text-md);
    letter-spacing: var(--tracking-tight);
  }

  .plan__price {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
  }

  .plan__per { color: var(--ink-muted); font-size: var(--text-sm); }

  .plan__lines {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .plan__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }

  .plan__label { color: var(--ink-muted); }

  .plan__figure { font-family: var(--font-mono); }

  
  .plan__note {
    min-block-size: 1lh;
    color: var(--accent);
    font-size: var(--text-sm);
  }

  @media (width <= 52rem) {
    .plans { grid-template-columns: minmax(0, 1fr); }
  }
}