.blog-overview {
  overflow-x: hidden;

  &__list {
    display: flex;
  }

  &__item a {
    outline: 0;
  }

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

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

  &__media {
    outline: 0;

    img {
      border-radius: $border-radius--l;
    }

    .text-placeholder {
      @include font-style($blog-article-item-title, $blog-article-item-title--l);
      border-radius: $border-radius--l;
      color: $color-brand--two;
      height: 100%;
      position: absolute;
      top: 0;
      width: 100%;
      &__text {
        @include text-ellipsis;
        left: 8%;
        position: absolute;
        right: 8%;
        &--top {
          color: $blog-overview-placeholder-text-color;
          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;
  }

  .icon {
    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 {
    &__title {
      transition: color $transition-duration--fast;
    }
    // hover on image + date/text
    &__link:hover .blog-overview__title,
    &__media:hover + .blog-overview__content .blog-overview__title {
      color: $color-brand--one;
    }

    .icon {
      color: currentColor;
    }

    .tags {
      margin-top: $spacing--xs;
    }
  }
}

@include blog-overview-background-mapping;
