@import 'debugging';

// Have fun!

.basic {
  generate-grid: columns(1/4 auto 1/4);
}


.responsive {
  > * {
    margin-bottom: 5px;
  }

  @media (min-width: 700px) {
    // Alias for generate-grid
    gg: columns(1/3 2/3);
    margin-bottom: 0;
  }

  @media (min-width: 1000px) {
    gg: columns(1/4 3/4);

    // Source ordering
    aside {
      position: relative;
      left: sizes(3/4) pluck(1) bump(30px);
    }

    main {
      position: relative;
      right: sizes(1/4) pluck(1) bump(30px);
    }
  }
}