@import "settings.breakpoints";
@import "settings.colors";
@import "settings.fonts";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-primary-title {
  @include css-variables("font-size", 25);
  color: $color-grey-900;
  margin: 0;

  @include mq($from: tablet) {
    @include css-variables("font-size", 40);
    line-height: line-height(40, 47); // font-size and line-height, in pixels
  }
}

.c-primary-title--news {
  @include font-pratt-bold;
}
.c-primary-title--feature {
  @include font-pratt;
}
.c-primary-title--video {
  margin-bottom: rem(10);
}
.c-primary-title--native {
  font-family: $font-sans-stack;
  font-weight: bold;
}

.c-primary-title--section {
  @include font-pratt;
  font-size: rem(34);
  line-height: line-height(34, 32);
  margin-top: 0;
  margin-bottom: 0;
}

///////////////////////////
// Breaker-Upper-Thing
///////////////////////////
.c-section-title {
  @include font-pratt;
  font-size: rem(26);
  line-height: line-height(26, 45);
  color: $color-grey-900;
  border-bottom: 1px solid $color-stone-300;
  @include mq($from: mobileWide) {
    font-size: rem(30);
    line-height: line-height(30, 45);
  }
  @include mq($from: tabletWide) {
    font-size: rem(40);
    line-height: line-height(40, 45);
  }
}
