.posts {
  margin: 0 0 2% 20px;

  width: 70%;

  &__list {
    display: flex;
    flex-direction: column;

    width: 100%;
    padding: 0;

    list-style: none;
  }

  &__item {
    display: flex;
    flex-direction: column-reverse;

    padding: 10px;

    max-width: max-content;

    &:first-child {
      padding: 0 10px 10px 10px;
    }

    & .badge {
      background-color: var(--lightest-accent-color);
    }

    &:last-child {
      border-bottom: 0;
    }
  }

  &__header {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: $header-size;

    &--read {
      color: var(--read-color);
    }

    &:hover {
      cursor: pointer;
    }
  }
}
