@layer components {
  .guest-admission {
    display: flex;
    flex: auto;
    flex-direction: column;
    justify-content: safe center;
    gap: var(--space-7);
    min-block-size: var(--space-0);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: calc(var(--safe-top) + var(--space-7)) calc(var(--safe-bottom) + var(--space-9));
    padding-inline: var(--gutter-fluid);
    text-align: center;
  }

  .guest-admission .participants {
    justify-content: safe center;
  }

  .guest-admission__join {
    inline-size: var(--size-fill);
    max-inline-size: var(--measure-tight);
    margin-inline: auto;
  }

  .guest-admission__join .button {
    inline-size: var(--size-fill);
  }
}