.grid-container
  box-shadow: 0 0 0 1px $grey
  margin: 0 auto
  max-width: 1000px
  padding: 0 !important

.grid
  --gridGap: 0.75rem
  --gridGap: 0
  --gridColumnGap: var(--gridGap)
  --gridRowGap: var(--gridGap)
  +block
  display: grid
  grid-column-gap: var(--gridColumnGap)
  grid-row-gap: var(--gridRowGap)
  $var: #{"1fr"}
  @for $i from 1 through 5
    &.has-#{$i + 1}-columns
      grid-template-columns: #{append($var, 1fr)}
      $var: append($var, #{"1fr"})

.cell
  background-color: $primary
  border-radius: $radius-large
  color: $link-invert
  padding: 1rem

  @for $i from 1 through 6
    &.is-#{$i}-tall
      grid-row: span $i
    &.is-#{$i}-wide
      grid-column: span $i

  // Colors
  &:nth-child(7n-6)
    background-color: $purple
  &:nth-child(7n-5)
    background-color: $link
  &:nth-child(7n-4)
    background-color: $info
  &:nth-child(7n-3)
    background-color: $primary
  &:nth-child(7n-2)
    background-color: $success
  &:nth-child(7n-1)
    background-color: $warning
    color: $warning-invert
  &:nth-child(7n)
    background-color: $danger