.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--border-width);
  background-color: var(--border-color);
}

[class*='col-'] {
  position: relative;
  background-color: var(--box-bg-color);
}

.col-md-1 {
  grid-column: span 1;
}

.col-md-2 {
  grid-column: span 2;
}

.col-md-3,
.masonry-grid > div {
  grid-column: span 3;
}

.col-md-4 {
  grid-column: span 4;
}

.col-md-5 {
  grid-column: span 5;
}

.col-md-6 {
  grid-column: span 6;
}

.col-md-7 {
  grid-column: span 7;
}

.col-md-8 {
  grid-column: span 8;
}

.col-md-9 {
  grid-column: span 9;
}

.col-md-10 {
  grid-column: span 10;
}

.col-md-11 {
  grid-column: span 11;
}

.col-md-12 {
  grid-column: span 12;
}

@media screen and (max-width: 700px) {
  .row {
    grid-template-columns: repeat(1, 1fr);
    /* row-gap: var(--border-width); */
  }

  [class*='col-md'] {
    grid-column: auto;
  }

  .row.masonry-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--border-width);
  }

  .masonry-grid > div {
    grid-column: span 1;
  }
}

/* special kombibox 07 */
.row.kombiBox07.arrow {
  column-gap: 0;
  /* grid-template-columns: calc(50% - 42px) auto; */
}

.row.kombiBox07 .col-md-6 {
  /* grid-column: span 1; */
}