// Organism: Text-Image

$o-ti-bp1: m;

.o-ti {
  @include vspacing(
    'margin-top' 1,
    'margin-bottom' 1
  );

  @include mq($o-ti-bp1) {
    display: flex;
  }
}


@include mq($max: $o-ti-bp1) {
  .o-ti__image {
    display: flex;
    justify-content: center;
    margin-top: space(4);
  }
}


@include mq($o-ti-bp1) {
  .o-ti__text,
  .o-ti__image {
    flex: 1 1 column(6, 12);
    padding-right: column(0.5,12);
  }

  .o-ti__image {
    padding-right: 0;
    padding-left: column(0.5, 12);
  }


  // Modifier for flipping the 2 blocks when they're beside each other
  .o-ti--is-reversed {
    .o-ti__text {
      order: 2;
      padding-left: column(0.5,12);
      padding-right: 0;
    }
    .o-ti__image {
      padding-left: 0;
      padding-right: column(0.5, 12);
    }
  }

}