.tui-icon-usps {
  background: $color-blue-500;
  order: 15;
}

.tui-icon-usp-icon {
  color: $color-white;

  .pictogram {
    vertical-align: middle;
  }
}

.tui-icon-usp-text {
  @include font-size(14);
  margin-bottom: 0;
  margin-left: $margin-normal;
  max-width: 100%;
  color: $color-white;
}

.tui-icons-usp-container,
.tui-icon-usp {
  @extend %flexbox-row;
  align-items: center;
}

.tui-icon-usp {
  margin-right: $margin-double;

  &:last-child {
    margin-right: 0;
  }
}

.tui-icons-usp-container {
  padding: $margin-half $margin-normal;
  justify-content: space-between;
  align-items: center;
}

@include breakpoint(xs) {
  .tui-page-start div.iconusp {
    order: 15;
  }

  .tui-icons-usp-container {
    padding: $margin-half;
    align-items: center;
    justify-content: space-around;
  }

  .tui-icon-usps {
    margin-bottom: 0;
  }

  .tui-icon-usp {
    margin-right: $margin-normal;

    &:nth-child(3) {
      margin-right: 0;
    }

    &:nth-child(2n) {
      display: none;
    }
  }

  .tui-icon-usp-icon {
    @include font-size(12);
    width: 18px;

    .pictogram {
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }
  }

  .tui-icon-usp-text {
    @include font-size(12);
    margin-bottom: 0;
    margin-left: $margin-quarter;
  }
}