.grid {
  display: grid;
  grid-gap: var(--si-space-28) 0;
  gap: var(--si-space-28) 0;
}
@media (min-width: 768px) {
  .grid {
    gap: var(--si-space-28);
  }
}
@media (min-width: 1024px) {
  .grid {
    gap: var(--si-space-40) var(--si-space-28);
  }
}
.grid .grid__item {
  display: flex;
}
.grid.grid--gap-none {
  gap: 0 !important;
}
.grid.grid--gap-small {
  gap: var(--si-space-12) 0;
}
@media (min-width: 768px) {
  .grid.grid--gap-small {
    gap: var(--si-space-12);
  }
}
.grid.grid--gap-large {
  gap: var(--si-space-28) 0;
}
@media (min-width: 768px) {
  .grid.grid--gap-large {
    gap: var(--si-space-40);
  }
}
.grid.grid--2-column {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (min-width: 768px) {
  .grid.grid--2-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.grid.grid--3-column {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (min-width: 768px) {
  .grid.grid--3-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.grid.grid--4-column {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (min-width: 768px) {
  .grid.grid--4-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .grid.grid--4-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.grid.grid--5-column {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (min-width: 768px) {
  .grid.grid--5-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  .grid.grid--5-column {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.grid.grid--6-column {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (min-width: 768px) {
  .grid.grid--6-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  .grid.grid--6-column {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

ul.grid {
  margin: 0;
  padding: 0;
}