<div class="landing-page {{modifier_class}}">
  <div class="landing-page__full">
    The <code>.landing-page__full</code> grid item.
  </div>
  <div class="landing-page__left-content">
    The <code>.landing-page__left-content</code> grid item.
  </div>
  <div class="landing-page__right-sidebar">
    The <code>.landing-page__right-sidebar</code> grid item.
  </div>
  <div class="landing-page__right-content">
    The <code>.landing-page__right-content</code> grid item.
  </div>
  <div class="landing-page__left-sidebar">
    The <code>.landing-page__left-sidebar</code> grid item.
  </div>
  <div class="landing-page__col-1">
    The <code>.landing-page__col-1</code> grid item.
  </div>
  <div class="landing-page__col-2">
    The <code>.landing-page__col-2</code> grid item.
  </div>
  <div class="landing-page__col-3">
    The <code>.landing-page__col-3</code> grid item. Don't forget to look for the <code>.landing-page__col-4</code> grid item at tablet sizes.
  </div>
  <div class="landing-page__col-4">
    The <code>.landing-page__col-4</code> grid item.
  </div>
  <div class="landing-page__full landing-page__grid-item-container">
    <div class="landing-page__col-x">
      The first <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
    <div class="landing-page__col-x">
      The second <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
    <div class="landing-page__col-x">
      The third <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
    <div class="landing-page__col-x">
      The fourth <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
    <div class="landing-page__col-x">
      The fifth <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
    <div class="landing-page__col-x">
      The sixth <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
  </div>
</div>
