@custom-media --mobile (min-width: 30em);
@custom-media --desktop (min-width: 50em);

.heading {
  font-size: var(--scale-1);
  @media (--mobile) {
    font-size: var(--scale-2);
  }
  &[data-centered="true"] {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (--desktop) {
  .heading[data-primary="true"] {
    font-size: var(--scale-3);
  }
}