$o-usp-bp1: 450;
$o-usp-bp2: 950;
$o-usp-bp3: l;

.o-usp__header {
  @include text-style(2);
  margin-bottom: space(6);
  text-align: center;
  color: palette(text, 800);
}


.o-usp__list {
  margin-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;

  @include mq($o-usp-bp2) {
    margin: 0 column(-0.5, 12);
  }

  @include mq($o-usp-bp3) {
    margin: 0;
  }
}


.o-usp__item {
  display: flex;
  color: palette(text, 800);
  max-width: 440px; // so text always wraps to multiple lines
  margin: space(3) auto;

  &::before {
    content: '';
    flex: none;
    display: block;
    width: 48px;
    height: 54px;
    background-image: url(/img/usp.svg);
    margin-right: space(2);

    @include mq(s) {
      margin-right: space(3);
    }
    @include mq($o-usp-bp2) {
      margin-right: space(6);
    }
  }


  @include mq($o-usp-bp1){
    @include font-size(m);
  }

  @include mq($o-usp-bp2) {
    max-width: none;
    width: calc(50% - #{column(1,12)});
    margin-right: column(0.5, 12);
    margin-left: column(0.5, 12);
  }

}