/*
 * content-image -> ci
 */

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

  @include mq(m) {
    display: flex;
    flex-direction: row;
  }
}

.o-ci__content {
  @include mq(m) {
    width: column(5, 8);
    margin-top: space(6);
    padding-left: 0;
    padding-right: column(1, 8);

    .o-ci--is-reversed & {
      padding-left: column(1, 8);
      padding-right: 0;
    }
  }
  @include mq(l) {
    width: column(6);
    padding-left: column(1) !important;
    padding-right: column(1) !important;
  }

  // when reversed set content right
  .o-ci--is-reversed & {
    order: 2;
  }
}

.o-ci__image {
  @include mq($max: m) {
    margin: space(5) auto 0;
    text-align: center;

    .o-ci--has-shape & {
      max-width: 71%;
    }
  }

  @include mq(m, l) {
    width: column(4, 8);
    margin-right: column(-1, 8);

    .o-ci--is-indented & {
      padding-right: column(1, 8);
    }

    .o-ci--is-reversed & {
      margin-right: 0;
      margin-left: column(-1, 8);
    }

    .o-ci--is-indented.o-ci--is-reversed & {
      padding-left: column(1, 8);
      padding-right: 0;
    }
  }

  @include mq(l) {
    width: column(6);

    .o-ci--is-indented & {
      padding-right: column(1);
    }

    .o-ci--is-indented.o-ci--is-reversed & {
      padding-left: column(1);
      padding-right: 0;
    }
  }
}

.o-ci__content {
  @include owl-children(space(3));

  h2 {
    @include text-style(2);
    margin-bottom: space(4);
    color: palette(text, 800);
  }

  h3 {
    @include text-style(3);
    color: palette(text, 800);
  }
}

.o-ci__action {
  margin-top: space(4);
}