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

.two-columns {
  background-color: $white;

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

.sticky--top {
  position: sticky;
  // scss-lint:disable VendorPrefix
  position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
  // scss-lint:enable VendorPrefix
  top: 0;
}

.sticky--bottom {
  position: sticky;
  // scss-lint:disable VendorPrefix
  position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
  // scss-lint:enable VendorPrefix
  bottom: 0;
}