$o-how-bp1: 600;
$o-how-bp2: 1000;
$o-how-image-clip-path-val: polygon(28.125% 0%, 0% 100%, 71.875% 100%, 100% 0%);

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


.o-how__heading {
  text-align: center;
  color: palette(tertiary, 400);
  margin-bottom: space(2);
}


.o-how__list {
  list-style: none;
  margin-left: 0;

  @include mq($o-how-bp1) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}


.o-how__item {
  $offset: space(2);
  max-width: 320px;
  margin: space(4) auto;

  @include mq($o-how-bp1) {
    flex: 0 1 column(6,12);
  }
  @include mq($o-how-bp2) {
    flex: 0 1 column(3,12);
  }

  // When clip-path is supported we can shift the items over each other
  @supports (clip-path: $o-how-image-clip-path-val) {
    @include mq($o-how-bp1) {
      flex: 0 1 calc(#{column(6,12)} + #{double($offset)});
      margin-left: -$offset;
      margin-right: -$offset;
    }
    @include mq($o-how-bp2) {
      flex: 0 1 calc(#{column(3,12)} + #{double($offset)});
    }
  }
}


.o-how__image {
  width: 100%;
  object-fit: cover;
  clip-path: $o-how-image-clip-path-val;
  padding: 0 space(2);

  @supports (clip-path: $o-how-image-clip-path-val) {
    padding: 0;
  }
}


.o-how__desc {
  margin-top: space(5);
  padding-left: space(2);
  padding-right: 28.125%;
  color: palette(tertiary, 400);
}


.o-how__action {
  text-align: center;
}