.blog-overview {
  overflow-x: hidden;

  &__article {
    &:hover {
      .blog-overview__title {
        color: $color-brand--one;       
      }
    }
  }

  &__list {
    display: flex;

    &--stacked {
      flex-direction: column;

      @include viewport--l {
        flex-direction: row;
      }

      .blog-overview__item:not(:last-child) {
        margin-bottom: $spacing--l;

        @include viewport--l {
          margin-bottom: 0
        }
      }
    }
  }

  &__content {
    margin-top: $spacing--s;
  }

  .blog-overview__article > &__content {
    margin-top: 0;
    margin-bottom: $spacing--s;
  }

  &__link {
    display: block;
    &,
    &:hover {
      text-decoration: none;
    }
  }

  &__media {
    border-radius: $border-radius--l;
    display: block;
    outline: 0;
    overflow: hidden;

    .text-placeholder {
      @include font-style(
        $blog-article-item-title,
        $blog-article-item-title--l
      );

      height: 100%;
      position: absolute;
      top: 0;
      width: 100%;

      &__text {
        @include text-ellipsis;
        left: 8%;
        position: absolute;
        right: 8%;

        &--top {
          top: 10%;
        }

        &--bottom {
          bottom: 10%;
          text-align: right;
        }
      }

      img {
        object-fit: scale-down;
        padding: $spacing--xs;
      }
    }

    // background mappings
    @include tags-background-mapping;
  }

  &__date {
    @include color-dark-shade-alternative;
    margin-bottom: $baseline * 0.5;
    display: block;
  }

  &__usp{
    ul {
      list-style: none;
      margin-top: $baseline * 0.5;
    li{
     padding-left:40px;
     margin-top:10px;
    }
   
    li::before{
      webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' %3E%3Cpath d='M7.6472,15.999 C7.3972,15.999 7.1462,15.905 6.9532,15.719 L1.3052,10.265 C0.9082,9.881 0.8972,9.247 1.2802,8.851 C1.6652,8.454 2.2982,8.441 2.6942,8.825 L7.6472,13.608 L17.3052,4.279 C17.7022,3.898 18.3362,3.907 18.7192,4.305 C19.1022,4.701 19.0912,5.335 18.6942,5.719 L8.3412,15.719 C8.1482,15.905 7.8972,15.999 7.6472,15.999'/%3E%3C/svg%3E%0A");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20' height='20' %3E%3Cpath d='M7.6472,15.999 C7.3972,15.999 7.1462,15.905 6.9532,15.719 L1.3052,10.265 C0.9082,9.881 0.8972,9.247 1.2802,8.851 C1.6652,8.454 2.2982,8.441 2.6942,8.825 L7.6472,13.608 L17.3052,4.279 C17.7022,3.898 18.3362,3.907 18.7192,4.305 C19.1022,4.701 19.0912,5.335 18.6942,5.719 L8.3412,15.719 C8.1482,15.905 7.8972,15.999 7.6472,15.999'/%3E%3C/svg%3E%0A");
      content: '';
      height: 20px;
      margin-left: -40px;
      margin-top: 4px;
      position: absolute;
      width: 20px;
    }
  }
  }

  &__title {
    @include font-style($blog-overview-title, $blog-overview-title--l);
    color: $color-brand--two;
    display: block;
    transition: color $transition-duration--fast;
    @include line-clamp(3);

    &--limited {
      @include line-clamp(3);
    }
  }

  .icon {
    color: currentColor;
    top: $baseline * 0.3;
  }

  // slick slider
  .slick-list {
    overflow: visible;
    // overwrite inline style 'inline-block' to prevent content jump on carousel initialization
    .blog-overview__item {
      display: block !important;
    }
  }

  // viewport l
  @include viewport--l {
    .tags {
      margin-top: $spacing--xs;
    }
  }
}

@include blog-overview-background-mapping;