@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: center;
      justify-content: center;
    }
  }

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

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

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

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