@import "colors";
@import "constants";
@import "placeholders";

.two-columns {
  $column-padding: 60px;
  $two-columns-breakpoint: $page-width + (2 * $column-padding);

  background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);

  .columns-container {
    @extend %page-width-container;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .column {
    width: 50%;
    padding: $column-padding;

    @media (min-width: $two-columns-breakpoint) {
      &:first-child {
        padding-left: 0;
      }

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