.list-items {
  overflow: hidden;
  position: relative;
  // render a 1px line at the bottom to hide border last item
  // this is needed for the 'closables' to work properly
  &::after {
    background: $color-brand--white;
    bottom: 0;
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    width: 100%;
    // background color mappings
    .bg-brand--blue & {
      background: $color-brand--one;
    }

    .bg-brand--dark-blue & {
      background: $color-brand--two;
    }

    .bg-brand--turquoise & {
      background: $color-brand--three;
    }

    .bg-brand--red & {
      background: $color-brand--five;
    }

    .bg-brand--yellow & {
      background: $color-brand--six;
    }

    .bg-brand--white & {
      background: $color-brand--white;
    }

    .bg-brand--off-white & {
      background: $color-brand--four;
    }
  }
  // viewport l
  @include viewport--l {
    margin-left: auto;
    width: grid-columns(8,9);

    .block__content--s & {
      width: 100%;
    }
  }
}
