/* Spacing comes from the space props, so the heading adds none of its own. */
.bad-heading.bad-heading-block {
  margin-block: 0;
}

.bad-heading-block--left {
  text-align: start;
}

.bad-heading-block--center {
  text-align: center;
}

.bad-heading-block--right {
  text-align: end;
}

/* Size override. The two classes beat the element rules (h2.bad-heading), and
   the scale keeps them smaller on phones like every other heading. */
.bad-heading.bad-heading-block--size-2xl {
  font-size: calc(var(--text-size-2xl) * var(--heading-scale));
}

.bad-heading.bad-heading-block--size-3xl {
  font-size: calc(var(--text-size-3xl) * var(--heading-scale));
}

.bad-heading.bad-heading-block--size-4xl {
  font-size: calc(var(--text-size-4xl) * var(--heading-scale));
}