@layer blocks {
  .note {
    font-family: var(--font-hand);
    font-size: 1.45rem;
    font-weight: var(--weight-semi);
    color: var(--color-accent-strong);
    rotate: -3deg;
  }

  .note[data-variant="margin"] {
    display: block;
    margin-block-end: var(--space-2xs);
  }

  @container (width >= 52rem) {
    .note[data-variant="margin"] {
      position: absolute;
      inset-inline-start: calc(-1 * (var(--notebook-margin) + var(--notebook-gutter)));
      inline-size: calc(var(--notebook-margin) - var(--space-xs));
      text-align: end;
    }
  }
}