@layer components {
  .age-gate {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    background: color-mix(in srgb, var(--color-off-white) 55%, transparent);
    backdrop-filter: blur(12px);
  }

  .age-confirmed .age-gate {
    display: none;
  }

  .age-gate-open {
    overflow: hidden;
  }

  .age-gate__panel {
    --panel-space: var(--space-7);

    width: min(100%, 560px);
    max-height: 100%;
    overflow-y: auto;
    text-align: center;
  }

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

  .age-gate__state[hidden] {
    display: none;
  }

  .age-gate__title {
    --display-accent: var(--color-brand-magenta);
  }

  .age-gate__icon {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--color-red);
  }

  .age-gate__text {
    max-width: 42ch;
  }

  .age-gate__note {
    max-width: 52ch;
    line-height: 1.5;
    color: var(--color-gray);
  }

  .age-gate__actions {
    --cluster-space: var(--space-3);
  }

  @media (max-width: 768px) {
    .age-gate__panel {
      --panel-space: var(--space-6);
    }

    .age-gate__actions .btn {
      width: 100%;
    }
  }
}