// Organism: Duo content

$o-duo-bp1: m;

.o-duo {
  @include vspacing(
    'margin-top' 1,
    'margin-bottom' 1
  );
}


.o-duo__main {
  @include mq($max: $o-duo-bp1) {
    padding: space(3) 0;
  }

  @include mq($o-duo-bp1) {
    display: flex;
  }
}


.o-duo__item {

  // Left & Right item
  @include mq($o-duo-bp1) {
    flex: 1 1 column(5.5,12);
    margin-right: column(0.5,12);
  }

  // Right item only
  &:last-child {
    margin-top: space(6);

    @include mq($o-duo-bp1) {
      flex: 1 1 column(5, 12);
      margin-top: 0;
      margin-left: column(0.5, 12);
      margin-right: column(0.5, 12);
    }
  }
}


.o-duo--on-dark {
  @include vspacing(
      'padding-top' 1,
      'padding-bottom' 1
  );
  position: relative;
  margin: 0; // reset
  color: palette(neutral, 0);
  background-color: palette(neutral, 800);

  &::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-image: url("/img/wave.jpg");
    background-size: cover;
    width: calc((100% - (100% / #{$site-columns}) * #{$site-columns - 2}) / 2);

    @include mq($bp-max) {
      width: calc(((100% - #{$site-max-width}px) / 2));
    }
  }


  // Content needs more offset because of illustration on right
  & .o-duo__item {
    @include mq($max: $o-duo-bp1) {
      padding-right: column(1, 12);
    }
  }

}