@layer components {
  .guest-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .guest-link__lead {
    font: var(--type-body);
    color: var(--color-ink);
    text-wrap: pretty;
  }

  .guest-link__code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }

  .guest-link__code .qr-code {
    inline-size: var(--guest-link-code-size);
    max-inline-size: var(--size-fill);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-1);
  }

  .guest-link__caption {
    font: var(--type-body-sm);
    color: var(--color-ink-muted);
    text-align: center;
    text-wrap: pretty;
  }

  .guest-link__send {
    align-self: stretch;
  }

  .guest-link__hint {
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }
}