@import "colors";
@import "common";
@import "constants";

.two-columns {
  background-color: #FFFFFF;

  @media (min-width: $two-columns-breakpoint) {
    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
  }

  .columns-container {
    @extend .container;
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media (min-width: $two-columns-breakpoint) {
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;
    }
  }

  .column {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: ($default-padding * 2) 0 0 0;

    &:last-of-type {
      padding-bottom: $default-padding * 2;
    }

    @media (min-width: $two-columns-breakpoint) {
      width: 45%;
      margin: 0;
      padding: $two-columns-padding 0 $two-columns-padding 0;

      &:last-of-type {
        padding-bottom: $two-columns-padding;
      }
    }
  }
}

.one-column-centered {
  margin: auto;
  max-width: $page-width / 2;
}

.blank-tab {
  text-align: center;
}