.make-grid(@type, @direction, @grid-units, @unit: vw) {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index =< @grid-units) {
    // general; "=<" isn't a typo
    &[@{type}="@{index}"], &.@{type}-@{index} {
        @{direction}: unit(percentage((@index / @grid-units)), @unit);
    }
    .col((@index + 1));
  }
  .col(1); // kickstart it
}

[tile], .tile {
  position: absolute;
  transition: all .5s;
  padding: @zazu-tiles-gap;
  display: block;

  .make-grid(width, width, @zazu-grid-columns, %);
  .make-grid(height, height, @zazu-grid-rows, %);
  .make-grid(col, left, @zazu-grid-columns, %);
  .make-grid(row, top, @zazu-grid-rows, %);

  .Theme-App({
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  });

  .Theme-AppHeader({
    overflow: hidden;
  });

  .Theme-AppContent({
    overflow: hidden;
    flex: auto;
    border-radius: 0 0 2px 2px;
    background: transparent none repeat scroll 0 0;
    box-shadow: none;
  });
}