.error {
  background: $color-white;
  padding: 60px 0;
  @media screen and (min-width: 992px) {
    padding: 133px 0 165px 0;
  }
}

.two-cols {
  display: flex;
  flex-direction: column;
  @media screen and (min-width: 992px) {
    flex-direction: row;
  }
  .col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    order: 2;
    &:last-of-type {
      order: 1;
      margin-bottom: 60px;
    }
    @media screen and (min-width: 992px) {
      flex: 0 50%;
      padding: 50px 100px 50px 55px;
      border-right: 1px solid $color-black;
      order: 1;
      &:last-of-type {
        order: 2;
        border-right: none;
        padding: 50px 55px 50px 100px;
        margin-bottom: 0;
        // quick fix for img until I get a better version
        img {
          position: relative;
          top: -40px;
        }
      }
    }
    h1 {
      font-weight: 700;
      color: $color-blue-dark;
      margin: 0 0 17px 0;
      text-align: center;
      @media screen and (min-width: 992px) {
        margin: 0 0 45px 0;
        text-align: right;
      }
    }
    p {
      color: #313131;
      font-size: rem(16);
      line-height: 1.5;
      margin: 0 0 50px 0;
      font-weight: 400;
      text-align: center;
      @media screen and (min-width: 992px) {
        font-size: rem(20);
        margin: 0 0 55px 0;
        text-align: right;
      }
    }
  }
  &__btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    @media screen and (min-width: 992px) {
      justify-content: flex-end;
    }
  }
}