$o-featured-bp1: 816;
$o-featured-bp2: 1000;
$o-featured-gap: column(0.5,12);


.o-featured {
  @include vspacing('margin-top' 1);
  overflow-x: hidden;
}


.o-featured__grid {
  position: relative;
  list-style: none;
  margin-left: 0;

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

  &::before {
    content: '';
    position: absolute;
    z-index: 0; // to go above a background set on a level higher
    bottom: 0;
    left: calc(-50vw + 50%);
    height: 25%;
    width: calc(100% + ((100vw - 100%)/2));
    display: block;
    background-color: palette(neutral, 800);

    @include mq($o-featured-bp1) {
      height: 50%;
    }
  }
}


.o-featured__item {
  position: relative;
  display: flex;
  justify-content: center;

  @include mq($max: $o-featured-bp1) {
    @include owl(space(4));
  }

  @include mq($o-featured-bp1) {
    flex: 1 1 column(6,12);

    &:nth-child(2n+1) {
      margin-right: $o-featured-gap;
    }
    &:nth-child(2n+2) {
      margin-left: $o-featured-gap;
    }
  }
}