.TwoColumnLayout {
  width: 100%;
  height: 100%;
  padding: var(--space) 0;
  display: flex;
  flex-direction: column;

  &__left,
  &--flexible &__left,
  &__right {
    width: 100%;
  }

  @media (--screen-XS-min) {
    padding: var(--space);
  }

  @media (--screen-M-min) {
    padding: var(--space-3x) var(--space-3x) var(--space);
    flex-direction: row;

    &__left {
      flex: 0 0 auto;
      width: 258px;
    }

    &__right {
      margin-left: var(--space);
    }

    &--flexible &__left {
      width: 30%;
      min-width: 367px;
    }
  }
}