@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;

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

  .column {
    padding: $two-columns-padding 0 0;
    width: 100%;
    max-width: 500px;

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

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }
  }
}

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

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