/* headings */
@each $name, $heading in $headings {
  .#{$name},
  %#{$name} {
    @extend %margin-0;
    @extend %hyphenate;

    @each $property, $value in $heading {
      @if ($property != 'mobile') {
        #{$property}: $value;
      }

      @if ($property == 'mobile') {
        @each $xs-property, $xs-value in $value {
          @include breakpoint-max($breakpoint-xs) {
            #{$xs-property}: $xs-value;

            @if ($xs-property == 'font-size') {
              line-height: line-height($xs-value);
            }
          }
        }
      }

      @if ($property == 'font-size') {
        line-height: line-height($value);
      }
    }
  }
}

/* heading xs class */
@each $name, $heading in $headings {
  @each $property, $value in $heading {
    @if ($property == 'mobile') {
      @each $xs-property, $xs-value in $value {
        .#{$name}-mobile,
        %#{$name}-mobile {
          @extend %margin-0;
          @extend %hyphenate;

          #{$xs-property}: $xs-value;

          @if ($xs-property == 'font-size') {
            line-height: line-height($xs-value);
          }
        }
      }
    }
  }
}