.blog-overview {
  overflow-x: hidden;

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

  &__list {
    display: flex;
  }

  &__item a {
    outline: 0;
  }

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

  &__link {
    &,
    &: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;
  }

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

    &--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;
