.tui-facts-icon-list {
  @extend %flexbox-row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: $margin-double;

  > li {
    @extend %flexbox-row;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    &.with-heading {
      align-items: flex-start;
    }

    &:not(:first-child) {
      border-bottom: 1px solid $color-tui-grey-25;
    }

    &:nth-child(-n+2) {
      border-top: 1px solid $color-tui-grey-25;
    }

    &:first-child:last-child {
      margin: auto;
    }

    @include breakpoint(sm) {
      width: calc(50% - #{$margin-double});
      border-bottom: 1px solid $color-tui-grey-25;
    }

    .pictogram {
      color: $color-tui-grey-50;
      width: 48px;
      height: 48px;
    }

    h3 {
      margin-top: 3px;
    }

    .text {
      flex: 1 0 0;
      padding: $margin-double $margin-enterprise;
    }

    p {
      margin: 0;
    }
  }
}

.tui-facts-icon-list-small {
  li {
    align-items: center;

    &:not(:last-child) {
      margin-bottom: $margin-double;
    }
  }

  .text {
    flex: 1 0 0;
    margin-left: $margin-normal;
  }
}

.tui-facts-icon-text {
  @extend %flexbox-row;
  @include font-size(20);
  flex-wrap: wrap;
  justify-content: space-between;

  li {
    width: 50%;

    @include breakpoint(md) {
      width: auto;
    }
  }

  .pictogram {
    width: $margin-quadruple;
    height: $margin-quadruple;
    margin-right: $margin-normal;
  }

  .text {
    padding: $margin-half;
  }
}