.custom-heading-size {
  --heading-size: var(--heading-size-sm);
  font-size: var(--heading-size);
  line-height: var(--section-heading-line-height, var(--line-height-heading));
}

@media (min-width: 720px) {
  .custom-heading-size {
    --heading-size: var(--heading-size-md);
  }
}

@media (min-width: 1024px) {
  .custom-heading-size {
    --heading-size: var(--heading-size-lg);
  }
}

@media (min-width: 1200px) {
  .custom-heading-size {
    --heading-size: var(--heading-size-xl);
  }
}