.gridRow {
  width: 100%;
  max-width: calc(var(--max-width) + var(--grid-gap) * 2);
  padding: var(--grid-gap);
  padding-bottom: 0;
  margin: 0 auto;
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(12, 1fr);
}
.gridRow__add-padding {
  padding: calc(var(--grid-gap) * 5) var(--grid-gap);
}
.gridRow__add-padding-small {
  padding: calc(var(--grid-gap) * 3) var(--grid-gap);
}

.gridCol__has-max-width {
  max-width: calc(var(--one-col-max-width) * 6 + var(--grid-gap) * 5);
}

.gridCol_full {
  grid-column: 1 / span 12;
}

/* Starting at 1 */
.gridCol_1-3 {
  grid-column: 1 / span 3;
}
.gridCol_1-4 {
  grid-column: 1 / span 4;
}
.gridCol_1-5 {
  grid-column: 1 / span 5;
}
.gridCol_1-6 {
  grid-column: 1 / span 6;
}

/* Starting at 4 */
.gridCol_4-7 {
  grid-column: 4 / span 4;
}
.gridCol_4-10 {
  grid-column: 4 / span 7;
}
.gridCol_4-12 {
  grid-column: 4 / span 9;
}

/* Starting at 6 */
.gridCol_5-10 {
  grid-column: 5 / span 6;
}

/* Starting at 6 */
.gridCol_6-12 {
  grid-column: 6 / span 7;
}

/* Starting at 7 */
.gridCol_7-12 {
  grid-column: 7 / span 6;
}

/* Starting at 9 */
.gridCol_9-12 {
  grid-column: 9 / span 4;
}

/* mobile adjustments */
@media (max-width: 720px) {
  .gridRow {
    grid-template-columns: 1fr;
  }
  .gridRow__add-padding {
    padding: calc(var(--grid-gap) * 4) var(--grid-gap);
  }

  .gridCol_full,
  .gridCol_1-3,
  .gridCol_1-4,
  .gridCol_1-5,
  .gridCol_1-6,
  .gridCol_4-7,
  .gridCol_4-10,
  .gridCol_4-12,
  .gridCol_5-10,
  .gridCol_6-12,
  .gridCol_7-12,
  .gridCol_9-12 {
    grid-column: 1;
  }

  .gridCol_mobileOrder_1 {
    order: 1;
  }
  .gridCol_mobileOrder_2 {
    order: 2;
  }
  .gridCol_mobileOrder_3 {
    order: 3;
  }
}