$o-duplex-bp1: 688;
$o-duplex-bp2: 1000;
$o-duplex-image-msx-height: 360px;
$o-duplex-image-clip-path-val: polygon(28.125% 0%, 0% 100%, 71.875% 100%, 100% 0%);


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


.o-duplex__main {
  @include contain;
  @include mq($o-duplex-bp1) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}


.o-duplex__item {
  margin: space(4) auto;

  @include mq($o-duplex-bp1) {
    flex: 0 1 calc(#{column(6,12)});
    margin: 0;

    &:first-child {
      $offset: column(0.5);
      margin-left: -$offset;
      margin-right: $offset;
    }
  }
}


.o-duplex__figure {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 62.5%; // Aspect ratio
    overflow: hidden;

    clip-path: $o-duplex-image-clip-path-val;
}


.o-duplex__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: palette(secondary, 100);
}


.o-duplex__content {
  @include vspacing(
      'padding-top' 0.6667,
      'padding-bottom' 0.6667
  );

  @include mq($o-duplex-bp1) {
    padding-left: column(0.5, 6);
    padding-right: column(0.5, 6);
  }

  @include mq($o-duplex-bp2) {
    padding-right: column(1, 6);
  }
}


.o-duplex__title {
  @include font-size(xl);
  @include font-weight(bold);
  color: palette(tertiary, 400);
}


.o-duplex__subtitle {
  @include font-size(base);
  @include font-weight(semiBold);
  margin-bottom: space(3);
  color: palette(secondary, 300);
}


.o-duplex__desc {
  margin-top: space(3);
  margin-bottom: space(5);
}


.o-duplex__action {

}


// Dark background and ornaments to the side
.o-duplex--on-dark {
  $top-ornament-ratio: 1.66667;
  $top-ornament-width: 5.365vw;
  $top-ornament-height: $top-ornament-width * $top-ornament-ratio;
  $top-ornament-width-fixed: 72px;
  $top-ornament-height-fixed: 120px;

  $bottom-ornament-ratio: 1.66667;
  $bottom-ornament-width: 10.73vw;
  $bottom-ornament-height: $bottom-ornament-width * $bottom-ornament-ratio;
  $bottom-ornament-width-fixed: 144px;
  $bottom-ornament-height-fixed: 240px;

  position: relative;
  color: palette(neutral, 0);
  margin-bottom: calc(#{space(4)} + #{halve($bottom-ornament-height)});

  @include mq($bp-max) {
    margin-bottom: calc(#{space(4)} + #{halve($bottom-ornament-height-fixed)});
  }

  // top left ornament
  &::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: $top-ornament-width;
    height: $top-ornament-height;
    color: green;
    background-size: $top-ornament-width $top-ornament-height;
    background-image: url(/img/ornaments/ornament-2.svg);
    transform: translateY(-50%);

    @include mq($bp-max) {
      width: $top-ornament-width-fixed;
      height: $top-ornament-height-fixed;
      background-size: $top-ornament-width-fixed $top-ornament-height-fixed;
    }
  }

  // bottom right ornament
  &::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0;
    right: 0;
    width: $bottom-ornament-width;
    height: $bottom-ornament-height;
    background-size: $bottom-ornament-width $bottom-ornament-height;
    background-image: url(/img/ornaments/ornament-1.svg);
    transform: translateY(50%);

    @include mq($bp-max) {
      width: $bottom-ornament-width-fixed;
      height: $bottom-ornament-height-fixed;
      background-size: $bottom-ornament-width-fixed $bottom-ornament-height-fixed;
    }
  }

  .o-duplex__main {
    // background color with an offset from the top
    &::before {
      content: '';
      display: block;
      position: absolute;
      z-index: -2;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: palette(primary, 700);
    }
  }

  // Offset background color AND top-left ornament
  &::before,
  .o-duplex__main::before {
    top: 47.75vw; // make it align with bottom image

    @include mq($o-duplex-bp1) {
      top: 22vw; // make it align with bottom image
    }

    @include mq($bp-max) {
      top: calc(#{$o-duplex-image-msx-height} - #{halve($top-ornament-height-fixed)}); // fixed size, because it can't size anymore
    }
  }

  .o-duplex__item {
    position: relative; // needed for z-index to work
  }

  .o-duplex__title {
    color: palette(neutral, 0);
  }
}