@use '../variables' as variables;
@use '../mixins' as mixins;

// Display

.display-1 {
  font-size: variables.$display1-size;
  font-weight: variables.$display1-weight;
  line-height: variables.$display-line-height;
}

.display-2 {
  font-size: variables.$display2-size;
  font-weight: variables.$display2-weight;
  line-height: variables.$display-line-height;
}

.display-3 {
  font-size: variables.$display3-size;
  font-weight: variables.$display3-weight;
  line-height: variables.$display-line-height;
}

.display-4 {
  font-size: variables.$display4-size;
  font-weight: variables.$display4-weight;
  line-height: variables.$display-line-height;
}

// Lists

.list-unstyled {
  @include mixins.list-unstyled();
}

.list-inline {
  @include mixins.list-unstyled();

  > li {
    display: inline;
  }
}

.list-column {
  column-gap: variables.$list-padding-left;
}