.dim {
  opacity: 0.8 !important;
}

.img-fluid {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

.bg-darkest {
  background-color: $darkest-bg !important;
}

.text-body-color {
  color: $body-font-color !important;
}

.text-heading-color {
  color: $heading-font-color !important;
}

.text-serif {
  font-family: $heading-font-family !important;
}

.text-underline {
  text-decoration: underline !important;
}

.text-small {
  font-size: 12px !important;

  @include breakpoint(md) {
    font-size: 14px !important;
  }
}

// Layout utils

.img-fluid {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

// Color / opacity utils

.bg-darkest {
  background-color: $darkest-bg !important;
}

.text-body-color {
  color: $body-font-color !important;
}

.text-heading-color {
  color: $heading-font-color !important;
}

.dim {
  opacity: 0.8 !important;
}

// Type utils

.text-serif {
  font-family: $heading-font-family !important;
}

.text-underline {
  text-decoration: underline !important;
}

.text-small {
  font-size: 12px !important;

  @include breakpoint(md) {
    font-size: 14px !important;
  }
}

.text-regular {
  font-size: 14px;

  @include breakpoint(md) {
    font-size: $body-font-size;
  }
}

.text-large {
  font-size: 16px;

  @include breakpoint(md) {
    font-size: 20px;
  }
}

Add text scaling utils and organize this
Add text scaling utils and organize this
