.horizontal-split {
  max-width: $width-content-constrained;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display       : flex;
  flex-direction : row;
  justify-content: space-between;
};

.horizontal-split__column {
  width: 50%;
  flex: 1 0 auto;
  box-sizing: border-box;
}

.horizontal-split__column--left {
  padding-right: $primary-padding;
}

.horizontal-split__column--right {
  padding-left: $primary-padding;
}

@media (max-width: $break-point-tablet) {

  .horizontal-split__column {
    display       : flex;
    flex-direction : column;
    justify-content: space-between;
  };

  .column {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: $secondary-padding;
  }
}