// HD
@screen-xl: (@screen-md * @line-height-base);
@screen-xl-min: @screen-xl;
@container-xl: (@container-md * @line-height-base);
@component-padding: @line-height-computed;

.make-xl-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-xl-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-xl-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-xl-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

@media (min-width: @screen-xl-min) {
  .make-grid(xl);
}

.container {
  @media (min-width: @screen-xl-min) {
    width: @container-xl;
  }
}