@layer components {
  .enroll {
    max-width: 32rem;
    margin-block: var(--block-space-double);
  }
  .enroll__title { margin-block-end: var(--block-space); }
  .enroll__note {
    margin-block: var(--block-space);
    color: var(--color-muted);
  }
  .enroll__actions {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    margin-block-start: var(--block-space);
  }

  /* The enrol call-to-action on the course page, under the price. */
  .course-enroll__cta { margin-block: var(--block-space); }

  /* The run's WhatsApp group link, shown to enrolled students under the enrollment status. */
  .course-enroll__group { margin-block-start: var(--block-space); }
}