h1, h2 {
  color: var(--text-dark);
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  padding: 20px 0;
  border-bottom: 2px solid var(--gray-lightest);
}

h2 {
  font-size: 24px;
  line-height: 32px;
  border-bottom: none;
}

a:not(.button) {
  color: var(--primary);
  text-decoration: none;

  &:hover {
    color: var(--primary-dark);
  }
}

.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

.text-black {
  color: black !important;
}

.text-white {
  color: white !important;
}

.text-light {
  color: var(--text-light) !important;
}

.text-lighter {
  color: var(--text-lighter) !important;
}

.text-dark {
  color: var(--text-dark) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-info {
  color: var(--info) !important;
}

.text-bold {
  font-weight: 700 !important;
}

.text-normal {
  font-size: 16px !important;
}

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

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

.text-smallest {
  font-size: 10px !important;
}

.text-large {
  font-size: 20px !important;
}

.text-larger {
  font-size: 24px !important;
}

.text-largest {
  font-size: 30px !important;
}

.tac {
  text-align: center !important;
}

.tar {
  text-align: right !important;
}

.tal {
  text-align: left !important;
}