// ============================================================================
// :: Key value
// ============================================================================
/**
 * A small component that is used to visualise a result represented by a term
 * and its defintion underneath it.
 */

// ============================================================================
// :: Root
// ============================================================================
.m-key-value {
  text-align: left;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-key-value__term,
.m-key-value__definition {
  font-family: $font-family-sora;
  font-size: $font-size-1x-small;
  line-height: $line-height-1x-small;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-base;
    line-height: $line-height-base;
  }
}

.m-key-value__term {
  display: block;

  margin-bottom: 0.8rem;

  font-weight: $font-weight-bold;

  color: $text-color-base;
}

.m-key-value__definition {
  font-weight: $font-weight-regular;

  color: $text-color-medium;
}