/**
 * @file Hero
 * @module Hero
 * @overview Hero and top of page featured hero modules
 */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: ms(16);
  padding: ms(8) ms(2);
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.hero--featured {
  justify-content: flex-start;
  height: 90vh;
}

.hero-heading,
.hero-subheading {
  color: color(primary);
}

.hero-heading {
  font-size: ms(1);
  margin-bottom: ms(2);
}

/**
 * @file Hero
 * @module Hero
 * @overview Hero and top of page featured hero modules
 */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: ms(16);
  padding: ms(8) ms(2);
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.hero--featured {
  justify-content: flex-start;
  height: 90vh;
}

.hero-heading,
.hero-subheading {
  color: color(primary);
}

.hero-heading {
  font-size: ms(1);
  margin-bottom: ms(-3);

  @include respond-at-and-above($break-tiny + 1) {
    font-size: ms(2);
  }

  @include respond-at-and-above($break-medium) {
    font-size: ms(4);
    margin-bottom: ms(0);
  }

  @include respond-at-and-above($break-gigantic) {
    font-size: ms(5);
  }
}

.hero-subheading {
  font-size: ms(0);

  @include respond-at-and-above($break-medium) {
    font-size: ms(2);
  }
}

Add default Hero heading and subheading styles
Add default Hero heading and subheading styles
