.blog-overview--list {
  .blog-overview {
    &__list {
      display: block;
    }

    &__item {
      margin-top: $spacing--m;
      padding-bottom: $spacing--m;
    }

    &__item:first-child {
      margin-top: 0;
    }

    &__article {
      display: flex;
      justify-content: space-between;
    }

    &__media {
      align-self: flex-start;
      width: grid-columns(2, 6);
    }

    &__content {
      margin-top: 0;
    }

    &__link {
      display: flex;
      flex-direction: column;
    }

    &__title {
      margin-top: 0;
      @include font-style('body--l', $blog-article-item-title);
    }

    &__more-link {
      @include font-style('body--l', $blog-article-item-title);
    }
    // viewport s - m
    @include viewport--l('inversed') {
      &__media {
        order: 2;
      }

      &__date {
        margin-bottom: 0;
        margin-top: $spacing--xs;
        order: 2;
      }

      &__content {
        display: flex;
        flex-direction: column;
        width: grid-columns(4, 6);
      }
    }
    // viewport l
    @include viewport--l {
      &__media {
        width: grid-columns(2, 9);
      }

      &__content {
        width: grid-columns(7, 9);
      }

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

      &__more-link {
        display: inline-block;
        margin-top: $spacing--s;
      }
    }
  }
}

// alternative grid spacings in small block content
@include viewport--l {
  .block__content--s .blog-overview--list {
    .blog-overview__media {
      width: grid-columns(2, 8);
    }

    .blog-overview__content {
      width: grid-columns(6, 8);
    }
  }
}
