.two-column-75-25 > div,
.two-column-60-40 > div,
.two-column-50-50 > div,
.two-column-25-75 > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

@media (min-width: 888px) {
  .two-column-75-25 > div,
  .two-column-60-40 > div,
  .two-column-50-50 > div,
  .two-column-25-75 > div {
    flex-wrap: nowrap;
  }
}

.left-region,
.right-region {
  flex: 1;
  margin: 0 0 1.5em 0;
}

/*** Left Column Styles ***/
.left-region {
  order: 1;
  width: 100%;
}

.two-column-75-25 .left-region,
.two-column-60-40 .left-region,
.two-column-50-50 .left-region {
  flex: 0 0 auto;
}

@media (min-width: 888px) {
  .two-column-75-25 .left-region {
    width: calc(71% - .75em);
    min-width: 70%;
    margin: 0 3em 0 0;
  }
}

@media (min-width: 888px) {
  .two-column-60-40 .left-region {
    width: calc(59% - .75em);
    min-width: 58%;
    margin: 0 3em 0 0;
  }
}

@media (min-width: 888px) {
  .two-column-50-50 .left-region {
    width: calc(45% - .75em);
    min-width: 44%;
    margin: 0 1.5em 0 0;
  }
}

/*** Right Column Styles ***/
.right-region {
  order: 2;
}

@media (min-width: 888px) {
  .right-region {
    margin: initial;
  }
}