$heroBp: 940;

.o-hero {
  position: relative;
  margin-bottom: 100px;
  overflow: hidden;
}

.o-hero__main {
  padding: 200px 0 60px;
  background-color: palette(primary, 800);

  #home & {
    padding-bottom: 0 !important;
  }
}

.o-hero__grid {
  position: relative;
  z-index: 1;

  @include mq($max: $heroBp) {
    > * + * {
      margin-top: 60px;
    }
  }


  @include mq($heroBp) {
    display: flex;
    justify-content: space-between;
    align-items: center;

    > * {
      width: 50%;
    }
  }
}

.o-hero__text {
  @include mq($heroBp) {
    padding-right: column(0.5, 6);
  }
}

.o-hero__text--service {
  position: relative;

  @include mq($heroBp) {
    width: column(10, 12);
    max-width: 900px;
  }
}

.o-hero__top-shape {
  position: absolute;
  left: 50vw;
  top: 0;
  height: 78%;

  img {
    height: 100%;
    max-width: none;
  }
}

.o-hero__placeholder {
  display: block;
  height: 120px;
  width: 100%;
  background-color: palette(primary, 800);
}

.o-hero__bottom-shape {
  display: flex;
  align-items: flex-start;
  width: 100%;
  color: palette(primary, 800);

  svg {
    width: 100%;
  }
}