// I'm not using a --modifier for the variants here
// as we don't have a base .heading block
.gv-u-heading-xxxlarge {
  @include bold-80;
  margin-bottom: 0.5em;
}

.gv-u-heading-xxlarge {
  @include bold-48;

  margin-top: em(15, 32);
  margin-bottom: em(30, 32);

  @include media(tablet) {
    margin-top: em(30, 48);
    margin-bottom: em(60, 48);
  }
}

.gv-u-heading-xlarge {
  @include bold-36;

  margin-top: em(25, 24);
  margin-bottom: em(10, 24);

  @include media(tablet) {
    margin-top: em(45, 36);
    margin-bottom: em(20, 36);
  }
}

.gv-u-heading-large {
  @include bold-27;

  margin-top: em(25, 20);
  margin-bottom: em(10, 20);

  @include media(tablet) {
    margin-top: em(45, 24);
    margin-bottom: em(20, 24);
  }
}

.gv-u-heading-medium {
  @include bold-24;

  margin-top: em(25, 20);
  margin-bottom: em(10, 20);

  @include media(tablet) {
    margin-top: em(45, 24);
    margin-bottom: em(20, 24);
  }
}

.gv-u-heading-small {
  @include bold-19;

  margin-top: em(10, 16);
  margin-bottom: em(5, 16);

  @include media(tablet) {
    margin-top: em(20, 19);
  }
}
