$o-duplex-bp1: 850;
$o-duplex-bp2: 1060;
$o-duplex-bp3: 1200;


.o-duplex {
  @include template(figure, content);
  position: relative;
}

.o-duplex__grid {
  @include contain;
  display: grid;
  grid-template-rows: auto auto;
  grid-row-gap: space(4);
  grid-template-areas:
    "content"
    "figure";

  @include mq($o-duplex-bp1) {
    grid-template-rows: auto;
    grid-template-columns: 5fr 1fr 6fr;
    grid-template-areas:
      "figure . content";
  }

  @include mq($o-duplex-bp2) {
    grid-template-columns: 6fr 1fr 5fr;
  }


  // Reversed modifier on parent element sets new grid values
  .o-duplex--reversed & {
    @include mq($o-duplex-bp1) {
      grid-template-columns: 6fr 1fr 5fr;
      grid-template-areas: "content . figure";
    }
    @include mq($o-duplex-bp2) {
        grid-template-columns: 5fr 1fr 6fr;
    }
    @include mq($o-duplex-bp3) {
        grid-template-columns: 1fr 4fr 1fr 6fr;
        grid-template-areas:
            ". content . figure";
      }
  }

  .o-duplex--full-grid & {
    max-width: none;
    width: 100%;
  }

}


.o-duplex__content {
  @include vspacing(margin-bottom 0.5);

  &.is-pulled-down {
    @include vspacing(margin-top 0.5);
  }

  .o-duplex--reversed & {
    @include mq($o-duplex-bp1){
      margin-top: 0;
      margin-bottom: space(8);
    }
  }
}


.o-duplex__figure {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-self: start;
  margin-bottom: space(4);

  @include mq($o-duplex-bp1) {
    margin-top: -9vw;
  }

  @include mq($bp-max) {
    margin-top: space(-15);
  }

  .o-duplex--prevent-pull-up & {
    margin-top: 0;
  }

  .o-duplex--additional-pull-up &{
    @include mq($o-duplex-bp1) {
      margin-top: -14vw;
    }

    @include mq($bp-max) {
      margin-top: space(-20);
    }
  }

}


.o-duplex__image {
  grid-row: 1 / 2;
  grid-column: 1 / 2;

  .ie & {
    width: 100%;
  }
}


.o-duplex__extra {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  align-self: end;
  z-index: 1;
  margin-left: space(4);
}


.o-duplex__note {
  max-width: 326px;
}