/* All code is referenced from in-lecture tutorial 3 */
* {
  box-sizing: border-box;
}

.grid {
  display: grid;
}

.grid.add-gutters {
  grid-column-gap: 1rem;
  grid-row-gap: 0.25rem;
}

@media (min-width: 50rem) {

  .grid.one-column {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  .grid.two-column {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  .grid.three-column {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  .grid.four-column {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  .grid.five-column {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

}