html,
body {
  @include font-default;
}

.h1,
h1 {
  @include font-roboto;
  margin: $gutter 0 ($gutter / 2);
  font-size: 40px;
  font-weight: 300;
}

.h2,
h2 {
  @include font-roboto;
  margin: $gutter 0 ($gutter / 2);
  font-size: 32px;
  font-weight: 300;
}

.h3,
h3 {
  @include font-roboto;
  margin: $gutter 0 ($gutter / 2);
  font-size: 26px;
  font-weight: 400;
}

.h4,
h4 {
  @include font-roboto;
  margin: $gutter 0 0;
  font-size: 22px;
  font-weight: 700;
}

.h5,
h5 {
  @include font-roboto;
  margin: $gutter 0 0;
  font-size: 18px;
  font-weight: 700;
}

.small-heading,
.h6,
h6 {
  @include font-roboto;
  margin: $gutter 0 0;
  font-size: 14px;
  font-weight: 700;
}

p {
  margin: ($gutter / 2) 0 0;
  line-height: 1.4;
}

// a {
//   &:visited { }
//   &:hover { }
//   &:active { }
// }

.small {
  @include font-roboto;
  line-height: 1.3;
  letter-spacing: 0.3px;
  font-size: 14px;
  font-weight: 300;
}

code {
  @include font-mono;
  display: block;
  margin: $gutter;
  line-height: 1.35;
  white-space: pre;
  font-size: 18px;
}