.grid {
  display: grid;
  width: 100%;
  margin: 0 auto;

  &--site-container {
    display: inline-block;
  }

  &--main-content {
    display: inline-block;
    height: calc(100vh - 50px);
    @include mq($from: tablet) {
      display: grid;
      grid-template-columns: minmax(0, auto) minmax(0, 1fr);
      grid-gap: 0;
    }
  }

  &--4-column {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    max-width: 1280px;
    @include mq($from: mobileBig) {
      grid-template-columns: repeat(2, 1fr);
    }
    @include mq($from: tablet) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  &--3-column {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    max-width: 1280px;
    @include mq($from: mobileBig) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  &--2-column {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    max-width: 1280px;
    @include mq($from: phablet) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  &--elements {
    grid-gap: 5px;
  }

  &--list {
    grid-template-columns: 100%;
    @include mq($from: tablet) {
      grid-template-columns: 50% 50%;
      grid-column-gap: 20px;
      grid-row-gap: 0;
    }
  }
}