@import 'public-booking/main_dependencies';

// Layout used to divide content page into two columns depending on chosen design.
@mixin two-columns($main-columns, $side-columns) {

  font-size: 0;

  &__main {
    font-size: $font-size-base;
    vertical-align:top;

    @include desktop {
      display: inline-block;
      padding-right: $grid-gutter-width / 2;
      width: ($main-columns / ($main-columns + $side-columns)) * 100%;
    }

    @include mobile-only {
      width: 100%;
      margin-bottom: $bb-panel-margin-offset;
    }
  }

  &__side {
    font-size: $font-size-base;
    vertical-align:top;

    @include desktop {
      display: inline-block;
      padding-left: $grid-gutter-width / 2;
      width: ($side-columns / ($main-columns + $side-columns)) * 100%;
    }

    @include mobile-only {
      width: 100%;
    }
  }

}