$o-duo-bp1: 1000;

.o-duo {
  counter-increment: duo;

  @include mq($max: $o-duo-bp1) {
    @include paperBackground;
  }

  @include mq($o-duo-bp1) {
    @include owl(space(6));
  }
}

.o-duo--full-bg:not(.o-duo--left) {
  @include paperBackground;
}

.o-duo--left {
  @include mq($max: $o-duo-bp1) {
    background: none;
  }
}


.o-duo__main {
  @include contain;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: space(6);

  @include mq($o-duo-bp1) {
    flex-wrap: nowrap;
    padding-bottom: 0;
  }

  // Show a big number before the content
  .o-duo--numbered &::before {
    @include font-size(xxxxl);
    @include font-weight('black');
    flex: 0 0 column(1,6);
    line-height: 0.7;
    content: counter(duo);
    color: palette(primary);
    padding-top: space(5);

    @include mq($o-duo-bp1) {
      flex-basis: column(1,12);
    }
  }

  @include mq($o-duo-bp1) {
    &::after {
      @include paperBackground;
      content: '';
      position: absolute;
      z-index: -1;
      height: 100%;
      width: 100vw;
      top: 0;
      right: 0;
    }
  }

  // Alternate blocks with paper background
  .o-duo--left & {
    @include mq($o-duo-bp1) {
      &::before {
        order: 2;
      }
    }
    &:after {
      display: none;
    }
  }

  .o-duo--full-bg & {
    &::after {
      display: none;
    }
  }
}


.o-duo__content {
  position: relative;
  flex: 1 1 column(5,6);
  padding: space(5) 0 space(8);

  @include mq($o-duo-bp1) {
    flex-basis: column(5,12);
    padding-right: 0;

    .o-duo--left & {
      order: 3;
    }
  }

  // Show "stap x" before the content
  .o-duo--numbered &::before {
    @include font-family(base);
    @include font-size(xs);
    @include font-weight('black');
    display: block;
    margin-bottom: space(1);
    color: palette(primary);
    text-transform: uppercase;
    content: attr(data-counter-name) " " counter(duo);
  }
}


.o-duo__aside {
  position: relative;
  flex-basis: 100%;

  @include mq($o-duo-bp1) {
    flex-basis: column(5,12);
    margin-left: column(1,12);

    .o-duo--left & {
      order: 1;
      margin-left: 0;
      margin-right: column(1,12);
    }
  }
}

.o-duo__picture {
  height: 100%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


.o-duo__aside--text {
  padding: 0 0 space(6) column(1,6);

  @include mq($o-duo-bp1) {
    padding: space(9) 0 space(4);
  }
}


.o-duo__image {
  position: relative;
  display: block;
  margin: 0 auto;
  height: 100%;
  object-fit: cover;
}