.horizontal-split { max-width: $width-content-constrained; width: 100%; display : flex; flex-direction : row; justify-content: center; box-sizing: border-box; &.horizontal-split--mobile-collapse { @media (max-width: $break-point-tablet) { flex-direction: column; .horizontal-split__column { } .horizontal-split__column--left { padding-top: $thin-padding; } .horizontal-split__column--right { padding-top: $thin-padding; } } } }; .horizontal-split__column { display : flex; flex: 1 1 auto; box-sizing: border-box; width: 100%; } .horizontal-split__column--left { padding: $tertiary-padding; @media (max-width: $break-point-tablet) { padding-left: 0px; padding-right: 0px; } } .horizontal-split__column--right { padding: $tertiary-padding; @media (max-width: $break-point-tablet) { padding-left: 0px; padding-right: 0px; } } @media (max-width: $break-point-tablet) { .horizontal-split__column { justify-content: space-between; }; .column { width: 100%; padding-left: 0; padding-right: 0; padding-bottom: $secondary-padding; } }