.flex-row {
  --gap: 20px;
  --gap-vertical: 0px;
  --gap_negative: calc(var(--gap) - var(--gap) * 2);
  --gap-vertical_negative: calc(var(--gap-vertical) - var(--gap-vertical) * 2);

  display: flex;
  flex-wrap: wrap;
  margin: var(--gap-vertical_negative) var(--gap_negative);
}
.flex-row--v20 {
  --gap-vertical: 20px;
}
.flex-row--v10 {
  --gap-vertical: 10px;
}
.flex-row--v5 {
  --gap-vertical: 5px;
}
.flex-row--32 {
  --gap: 32px;
}
.flex-row--30 {
  --gap: 30px;
}
.flex-row--20 {
  --gap: 20px;
}
.flex-row--10 {
  --gap: 10px;
}
.flex-row--5 {
  --gap: 5px;
}
.flex-row__item {
  padding: var(--gap-vertical) var(--gap);
}
@media (max-width: 991px) {
  .flex-row--width-100 > .flex-row__item {
    flex-basis: 100%;
  }
}

.grid-row {
  --gr-2: 2;
  --gr-3: 3;
  --gr-4: 4;
  --gr-5: 5;
  --gr-6: 6;
  display: grid;
}
.grid-row--autofill {
  grid-template-columns: repeat(auto-fill, minmax(207px, 1fr));
}
.grid-row--2 {
  grid-template-columns: repeat(var(--gr-2), 1fr);
}
.grid-row--3 {
  grid-template-columns: repeat(var(--gr-3), 1fr);
}
.grid-row--4 {
  grid-template-columns: repeat(var(--gr-4), 1fr);
}
.grid-row--5 {
  grid-template-columns: repeat(var(--gr-5), 1fr);
}
.grid-row--6 {
  grid-template-columns: repeat(var(--gr-6), 1fr);
}
.grid-row--no-gap > .grid-row__item {
  margin: 0 -1px -1px 0;
}
@media (max-width: 1200px) {
  .grid-row--4 {
    --gr-4: 3;
  }
  .grid-row--5 {
    --gr-5: 4;
  }
  .grid-row--6 {
    --gr-6: 5;
  }
}
@media (max-width: 991px) {

  .grid-row--3 {
    --gr-3: 2;
  }
  .grid-row--4 {
    --gr-4: 2;
  }
  .grid-row--5 {
    --gr-5: 4;
  }
  .grid-row--6 {
    --gr-6: 4;
  }
}
@media (max-width: 767px) {
  .grid-row--5 {
    --gr-5: 3;
  }
  .grid-row--6 {
    --gr-6: 3;
  }
}
@media (max-width: 600px) {
  .grid-row {
    --gr-2: 1;
    --gr-3: 1;
    --gr-4: 1;
    --gr-5: 2;
    --gr-6: 2;
  }
}
.grid-row__item{
  min-width: 0;
}
@media (width > 600px) {
  .grid-row__item--span-2 {
    grid-column-end: span 2;
  }
}
