/* F4 preview of the customer's card: the card itself (loyalty_card.css) on a pile. */
@layer components {
  .card-preview { max-inline-size: 24rem; margin: 0; }

  /* The campaign form with its card beside it, held in view while the form scrolls. Below the
     form on a phone. */
  .campaign-editor {
    display: grid;
    gap: var(--block-space-double) calc(var(--inline-space) * 6);
    align-items: start;

    @media (min-width: 64rem) {
      grid-template-columns: minmax(0, 36rem) minmax(0, 24rem);

      & > .card-preview { position: sticky; inset-block-start: var(--block-space-double); }
    }
  }
}