.grid {
  display: grid;
  grid-template-columns: auto;
  grid-gap: calc(var(--gutter-width));

  &.grid--s-1 {
    @media(min-width: 576px) {
      grid-template-columns: auto;
    }
  }
  &.grid--s-2 {
    @media(min-width: 576px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  &.grid--s-3 {
    @media(min-width: 576px) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  &.grid--s-4 {
    @media(min-width: 576px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
  &.grid--m-1 {
    @media(min-width: 768px) {
      grid-template-columns: auto;
    }
  }
  &.grid--m-2 {
    @media(min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  &.grid--m-3 {
    @media(min-width: 768px) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  &.grid--m-4 {
    @media(min-width: 768px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
  &.grid--l-1 {
    @media(min-width: 992px) {
      grid-template-columns: auto;
    }
  }
  &.grid--l-2 {
    @media(min-width: 992px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  &.grid--l-3 {
    @media(min-width: 992px) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  &.grid--l-4 {
    @media(min-width: 992px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
  &.grid--xl-1 {
    @media(min-width: 1200px) {
      grid-template-columns: auto;
    }
  }
  &.grid--xl-2 {
    @media(min-width: 1200px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  &.grid--xl-3 {
    @media(min-width: 1200px) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  &.grid--xl-4 {
    @media(min-width: 1200px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
  &.grid--xxl-1 {
    @media(min-width: 1400px) {
      grid-template-columns: auto;
    }
  }
  &.grid--xxl-2 {
    @media(min-width: 1400px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  &.grid--xxl-3 {
    @media(min-width: 1400px) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  &.grid--xxl-4 {
    @media(min-width: 1400px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}