<div class="container demo-lhcrop">
  <div class="demo-lhcrop__img"></div>
  <div class="demo-lhcrop__text">
    <h1>This is the demo of the line-height crop mixin</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eligendi, nulla iusto magnam explicabo nihil, dolorem, dignissimos dolore provident consectetur quo at quos impedit laboriosam obcaecati cumque suscipit quidem fuga consequatur! Voluptatibus, magni! Repellat necessitatibus dignissimos pariatur odio dolorum assumenda odit provident laborum fuga est, fugiat molestiae repudiandae earum! Omnis ad quod et eum dolores quibusdam expedita odio corporis dolorum natus esse alias aliquam sapiente tempora sunt iusto excepturi voluptatem, cupiditate deleniti aperiam eveniet ullam architecto quae veritatis.</p>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto');

:root {
  //font family 
  --font-primary: 'Roboto', sans-serif;
  /* line-height */
  --heading-line-height: 1.2;
  --body-line-height: 1.4;
  /* capital letters - used in combo with the lhCrop mixin */
  --font-primary-capital-letter: 0.75;
}

// lhCrop mixin - crop top space on text elements
@mixin lhCrop($line-height, $capital-letter: 1) {
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
  }
}

.demo-lhcrop__text h1 {
  @include lhCrop(var(--heading-line-height), var(--font-primary-capital-letter));
}

//demo style
.demo-lhcrop {
  font-family: var(--font-primary);
  font-size: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  line-height: var(--body-line-height);
}
.demo-lhcrop__img {
  background-color: #06173c;
}
.demo-lhcrop__text {
  background-color: #e8983e;
  color: #06173c;
  
  h1 {
    margin: 0;
    line-height: var(--heading-line-height);
    font-size: 50px;
  }
}