//
// type.scss
// Extended from Bootstrap
//

// Font

// Headings

h1,
h2,
.h1,
.h2 {
  margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
  letter-spacing: $headings-letter-spacing;
}

h1,
.h1 {
  line-height: $h1-line-height;

  @include media-breakpoint-down(md) {
    font-size: $h1-font-size-md;
  }
}

h2,
.h2 {
  line-height: $h2-line-height;

  @include media-breakpoint-down(md) {
    font-size: $h2-font-size-md;
  }
}

h3,
.h3 {
  line-height: $h3-line-height;

  @include media-breakpoint-down(md) {
    font-size: $h3-font-size-md;
  }
}

h4,
.h4 {
  line-height: $h4-line-height;

  @include media-breakpoint-down(md) {
    font-size: $h4-font-size-md;
  }
}

h5,
.h5 {
  line-height: $h5-line-height;
}

h6,
.h6 {
  line-height: $h6-line-height;

  &.text-uppercase {
    letter-spacing: 0.08em;
  }
}

// Display

.display-1 {
  line-height: $display1-line-height;
  letter-spacing: $display1-letter-spacing;

  // @include media-breakpoint-down(md) {
  //   font-size: $display1-size-md !important;
  //   line-height: $display1-line-height-size-md !important;
  //   letter-spacing: $display1-line-letter-spacing-md !important;
  // }
  @include media-breakpoint-down(sm) {
    font-size: $display1-size-sm !important;
    line-height: $display1-line-height-size-sm !important;
    letter-spacing: $display1-line-letter-spacing-sm !important;
  }
  @include media-breakpoint-down(xs) {
    font-size: $display1-size-xs !important;
    line-height: $display1-line-height-xs !important;
    letter-spacing: $display1-line-letter-spacing-xs !important;
  }
}

.display-2 {
  line-height: $display2-line-height;
  letter-spacing: $display2-letter-spacing;

  @include media-breakpoint-down(md) {
    font-size: $display2-size-sm;
    line-height: $display2-line-height-size-sm !important;
    letter-spacing: $display2-line-letter-spacing-sm;
  }
}

.display-3 {
  line-height: $display3-line-height;
  letter-spacing: $display3-letter-spacing;

  @include media-breakpoint-down(md) {
    font-size: $display3-size-sm;
    line-height: $display3-line-height-size-sm !important;
    letter-spacing: $display3-line-letter-spacing-sm;
    font-weight: $display3-weight-sm;
  }
}

.display-4 {
  line-height: $display4-line-height;
  letter-spacing: $display4-letter-spacing;

  @include media-breakpoint-down(md) {
    font-size: $display4-size-sm;
    line-height: $display4-line-height-size-sm !important;
    letter-spacing: $display4-line-letter-spacing-sm;
    font-weight: $display4-weight-sm;
  }
}

// display rules on xs screen

.display-xs-1 {
  font-size: $display1-size-xs;
  font-weight: $display1-weight-xs;
  line-height: $display1-line-height-xs;
  letter-spacing: $display1-line-letter-spacing-xs;
}
.display-xs-2 {
  font-size: $display2-size-xs;
  font-weight: $display2-weight-xs;
  line-height: $display2-line-height-xs;
  letter-spacing: $display2-line-letter-spacing-xs;
}
.display-xs-3 {
  font-size: $display3-size-xs;
  font-weight: $display3-weight-xs;
  line-height: $display3-line-height-xs;
}
.display-xs-4 {
  font-size: $display4-size-xs;
  font-weight: $display4-weight-xs;
  line-height: $display4-line-height-xs;
}
.display-xs-p {
  font-size: $display-p-size-xs;
  font-weight: $display-p-weight-xs;
  line-height: $display-p-line-height-xs;
  letter-spacing: $display-p-line-letter-spacing-xs;
}
.display-xs-2-p {
  font-size: $display-p-2-size-xs;
  font-weight: $display-p-2-weight-xs;
  line-height: $display-p-2-line-height-xs;
  letter-spacing: $display-p-2-line-letter-spacing-xs;
}

// Lead

.lead {
  @include media-breakpoint-down(md) {
    font-size: $lead-font-size-md;
  }
}

// Blockquote

.blockquote-img {
  max-height: 2.5rem;
  max-width: 100%;
  width: auto;
}

.blockquote-footer {
  &::before {
    display: none;
  }
}

// Social list

.list-social-icon {
  max-width: 1.25rem;
  height: auto;
}

// Dividers

.hr-sm {
  width: 60px;
  border-top-width: $border-width * 2;
}

.hr-md {
  width: 100px;
  border-top-width: $border-width * 2;
}

// Code

code {
  line-height: $code-line-height;
}