.sideBySide {
  display: flex;
  flex-wrap: wrap;

  @media (--large) {
    flex-wrap: nowrap;
  }

  & .sideWrapper {
    padding: 105px 0;
    width: 100%;

    @media (--large) {
      width: 50%;
      padding-bottom: 176px;
    }

    &.leftSide {
      background: var(--consul-secondary);

      @media (--large) {
        padding-left: 48px;
        padding-right: 104px;
      }
    }

    &.rightSide {
      @media (--large) {
        padding-right: 48px;
        padding-left: 75px;
      }
    }

    & .side {
      margin: 0 auto;

      @media (--small) {
        max-width: 616px;
        padding-left: 24px;
        padding-right: 24px;
      }

      @media (--medium) {
        max-width: 944px;
        padding-left: 40px;
        padding-right: 40px;
      }

      @media (--large) {
        margin: 0;
        max-width: 490px;
      }
    }

    &:first-child .side {
      @media (--large) {
        float: right;
      }
    }
  }
}