liser/src/modules/line-height.css

functional css help to optimizing design work and building responsive websites

.lh-solid {
  line-height: 1;
}
.lh-title {
  line-height: 1.25;
}
.lh-copy {
  line-height: 1.5;
}

@media screen and (min-width: 30em) {
  .lh-solid-ns {
    line-height: 1;
  }
  .lh-title-ns {
    line-height: 1.25;
  }
  .lh-copy-ns {
    line-height: 1.5;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .lh-solid-m {
    line-height: 1;
  }
  .lh-title-m {
    line-height: 1.25;
  }
  .lh-copy-m {
    line-height: 1.5;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .lh-solid-ml {
    line-height: 1;
  }
  .lh-title-ml {
    line-height: 1.25;
  }
  .lh-copy-ml {
    line-height: 1.5;
  }
}

@media screen and (min-width: 60em) {
  .lh-solid-l {
    line-height: 1;
  }
  .lh-title-l {
    line-height: 1.25;
  }
  .lh-copy-l {
    line-height: 1.5;
  }
}