/* F4 preview of the customer's card: violet, white text (CustomerLoyaltyCard). */
@layer components {
  .card-preview {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    max-inline-size: 22rem;
    margin: 0;
    padding: var(--block-space-double) calc(var(--inline-space) * 3);
    color: var(--color-text-reversed);
    background: var(--color-link);
    border-radius: var(--radius-large);

    & p { margin: 0; }
  }

  .card-preview__business { font-weight: 700; }

  .card-preview__reward { font-size: var(--text-large); font-weight: 700; }

  .card-preview__conditions { font-size: var(--text-x-small); }
}