.o-hero {

  margin-top: 80px;
  margin-bottom: 80px;

  @include mq(550) {
    margin-top: 120px;
    margin-bottom: 120px;
  }

  @include mq(m) {
    margin-top: 160px;
    margin-bottom: 160px;
  }
}

.o-hero__contain {
  @include mq(800) {
    @include contain;
  }
}

.o-hero__main {
  @include mq($max: 1000) {
    @include owl-children(60px);
  }

  @include mq(1000) {
    @include flex(space-between flex-start);

    .o-hero--inverted & {
      flex-direction: row-reverse;
    }
  }
}

.o-hero__content {
  @include mq($max: 800) {
    padding: 0 $site-gutter-width;
  }
}

.o-hero__button {
  margin-top: 60px;
}

@include mq(1000, 1300) {
  .o-hero__image {
    width: column(6, 12);
  }

  .o-hero__content {
    width: column(5, 12);
  }
}

@include mq(1300) {
  .o-hero__image {
    width: column(6, 12);

    .o-hero--inverted & {
      width: column(7, 12);
    }
  }
  .o-hero__content {
    width: column(4, 12);
    margin-right: column(1, 12);

    .o-hero--inverted & {
      margin-right: 0;
    }
  }


}