/* ------------------------------------*\
    $GRIDS
\*------------------------------------ */

.l-grid {
  display: grid;
  grid-template-rows: auto;
  grid-gap: var(--grid-gutter);
}

.l-grid--large-gutters {
  grid-gap: var(--grid-gutter-large);
}

.l-grid--no-gutters {
  grid-gap: 0;
}

.l-grid--2up {
  @include media(">medium") {
    grid-template-columns: repeat(2, 1fr);
  }
}

.l-grid--2up--small {
  @media all and (max-width: $medium) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.l-grid--2up--xlarge {
  @media all and (min-width: $xlarge) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.l-grid--3up {
  @include media(">medium") {
    grid-template-columns: repeat(3, 1fr);
  }
}

.l-grid--4up {
  @include media(">medium") {
    grid-template-columns: repeat(2, 1fr);
  }

  @include media(">large") {
    grid-template-columns: repeat(4, 1fr);
  }
}

.l-grid--5up {
  @include media(">large") {
    grid-template-columns: repeat(5, 1fr);
  }
}

.l-grid--2x3 {
  @include media(">large") {
    grid-template-columns: 1fr 2fr;
  }
}

.l-grid--3x2 {
  @include media(">large") {
    grid-template-columns: 2fr 1fr;
  }
}

.l-grid--1x4 {
  grid-template-columns: 1fr 3fr;
}

.l-grid--4x1 {
  grid-template-columns: 3fr 1fr;
}

.l-grid--right-rail {
  @include media(">large") {
    grid-template-columns: 1fr 300px;
  }
}

// ordering

.l-grid--order-1-large {
  order: 2;
  @include media(">large") {
    order: initial;
  }
}

.l-grid--order-2-large {
  order: 1;
  @include media(">large") {
    order: initial;
  }
}

// alignment

.l-grid--top {
  align-items: flex-start;
}

.l-grid--middle {
  align-items: center;
}

.l-grid--bottom {
  align-items: flex-end;
}