$o-book-slant-height: 6.6667vw; // ratio of its width (96 / 1440)

.o-book {
  position: relative;
  background-color: palette(primary, 500);
}

.o-book__main {
  position: relative;
  z-index: 1;
  margin: -$o-book-slant-height 6vw;
  display: flex;
  align-items: center;

  @include mq(460) {
    max-width: 384px;
    margin-left: auto;
    margin-right: auto;
  }

  @include mq(1600) {
    padding: 1vw 0;
  }

  @include mq(1800) {
    padding: 1.5vw 0;
  }
}

.o-book__main--form {
  max-width: 1000px !important;
  margin-bottom: 0;
  padding-bottom: space(10) !important;
}

.o-book__content {
  @include border-radius(s);
  width: 100%;
  padding: space(2) space(3);
  background-color: palette(neutral, 0);

  @include mq(460) {
    padding: space(2) space(6) space(3) space(6);
  }

  @include mq($max: 1200) {
    margin-top: -20px;
    margin-bottom: -20px;
  }
}

.o-book__title {
  @include font-size(xl);
}

.o-book__action {
  margin-top: space(3);
}

.o-book__top-slant {
  background-color: palette(secondary, 900);
  color: palette(primary, 500);

  @include mq($max: 1200) {
    &:before {
      content: '';
      display: block;
      width: 100%;
      height: 60px;
    }
  }
}

.o-book__bottom-slant {
  color: palette(neutral, 100);

  @include mq($max: 1200) {
    &:after {
      content: '';
      display: block;
      width: 100%;
      height: 60px;
      margin-top: -1px;
      background-color: palette(neutral, 100);
    }
  }
}