spee.ch/client/scss/horizontal-quad-split/_horizontal-quad-split.scss

.horizontal-quad-split {
  display       : flex;
  flex-direction : row;
  justify-content: space-between;
  align-items    : flex-start;
  .left-side, .right-side {
    width          : 50%;
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : flex-start;
    .column-a, .column-b, .column-c, .column-d {
      width: 50%;
    };
    .column-a, .column-b, .column-c {
      padding-right: $secondary-padding;
    };
  };
};



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

  .horizontal-quad-split {
    flex-direction : column;
    .left-side, .right-side {
      width          : 100%;
      .column-a, .column-b, .column-c, .column-d {
        width: 50%;
      };
      .column-b {
        padding-right: 0;
      }
    }
  };

}

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

  .horizontal-quad-split {
    flex-direction : column;
    .left-side, .right-side {
      flex-direction : column;
      .column-a, .column-b, .column-c, .column-d {
        width: 100%;
        padding: 0;
      };
    }
  };

}