@layer components {
  /* A tab's page before it exists: just its name and "Coming soon" */
  .soon {
    display: grid;
    place-content: center;
    gap: var(--space-2);
    min-height: 100%;
    text-align: center;
    color: var(--color-ink);
  }

  .soon__title {
    margin: 0;
    font-family: var(--font-tabs);
    font-size: var(--text-2xl);
    text-transform: uppercase;
  }

  .soon__text {
    margin: 0;
    font-size: var(--text-lg);
  }
}