.text-2col {
  position: relative;

  display: grid;
  grid-gap: var(--gutter-width);
  grid-template-columns: auto;
  @media(min-width: 992px) {
    grid-template-columns: 1fr 1fr;
    grid-gap: calc(var(--gutter-width) * 2);

    padding: calc(var(--gutter-width) * 2.5);
  }
  @media(min-width: 1400px) {
    grid-gap: calc(var(--gutter-width) * 6);
  }

  .left-column, .right-column {
    background-color: var(--white);
    color: var(--black);

    padding: calc(var(--gutter-width) * 2);
    @media(min-width: 992px) {
      padding: calc(var(--gutter-width) * 3);
    }

    h2 {
      margin-top: 0;
    }
  }

  .left-column {
    display: flex;
    flex-direction: column;
    justify-content: center;

    grid-row: 1;
    @media(min-width: 992px) {
      grid-row: 1;
    }
    padding: calc(var(--gutter-width));
    @media(min-width: 768px) {
      padding: calc(var(--gutter-width) * 2);
    }
    @media(min-width: 992px) {
      /*margin-top: -100px;*/
      transform: translateY(-50px);
    }
    @media(min-width: 1400px) {
      /*padding: 0;*/
    }
  }
  .right-column {
    display: flex;
    flex-direction: column;
    justify-content: center;

    grid-row: 2;
    @media(min-width: 992px) {
      grid-row: 1;
    }
    padding: calc(var(--gutter-width));
    @media(min-width: 768px) {
      padding: calc(var(--gutter-width) * 2);
    }
    @media(min-width: 992px) {
      /*margin-top: 100px;*/
      transform: translateY(50px);
    }
    @media(min-width: 1400px) {
      /*padding: 0;*/
    }
  }
}