/* Service page: what the client pays the hoster and the registrar directly. */

@layer components {
  .hosting-costs {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }

  .hosting-costs h2,
  .hosting-costs-lead { grid-column: 1 / -1; }

  .hosting-costs-lead { color: var(--ink-muted); }

  .hosting-costs-item {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
  }

  .hosting-costs-item h3 { font-size: var(--step-0); }
  .hosting-costs-item p { color: var(--ink-muted); }
}