.blog-post-meta {
  padding-left: 0;
  margin-bottom: 1rem;
  font-size: 14px;
  color: #6a737d;
  list-style: none;

  img {
    display: inline-block;
    height: 16px;
    margin-top: -2px;
    margin-right: 5px;
    vertical-align: middle;
  }

  .meta-item {
    display: inline-block;
    box-sizing: border-box;
    padding: 0.5rem 1rem 0 0;
  }

  .meta-category::after {
    content: '';
    display: block;
    border-top: 1px solid;
  }
}

.list {
  margin-bottom: 2rem;

  .blog__article {
    box-shadow: 0 0 2px 0 #DDDDDD;
    width: 100%;
    margin: 1rem 0;
    height: 280px;
    position: relative;
    text-align: left;

    .logo {
      display: inline-block;
      width: 420px;
      height: 280px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .abstract {
      display: inline-block;
      float: right;
      padding: 0 1rem;
      width: calc(~"100% - 420px");
      height: 280px;
      overflow: hidden;

      h1 {
        font-size: 1rem;
        margin: 1rem 0;
        font-weight: 400;
      }

      .brief {
        // font-size: 0.8rem;
        font-family: "Lato";
        position: relative;
        font-weight: 400;
        font-size: 0.8rem;
        line-height: 1.7;
        width: 100%;
        height: 100px;
        padding: 0 1rem 0.5rem 0;
        overflow: auto;
      }
    }

    .clearfix::after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .readMore {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      color: #3A58F0;
      font-size: 15px;
    }

    &:hover {
      transition: box-shadow 0.2s ease-in-out;
      box-shadow: 5px 5px 20px #DDDDDD;

      .readMore {
        color: #6780FF;
      }
    }
  }
}

@media (max-width: 1500px) {
  .list {
    .blog__article {
      height: 250px;

      .logo {
        width: 375px;
        height: 250px;
      }

      .abstract {
        width: calc(~"100% - 375px");
        height: 250px;

        .brief {
          height: 80px;
        }
      }
    }
  }
}

@media (max-width: 900px) {
  .list {
    .blog__article {
      height: 200px;

      .logo {
        width: 300px;
        height: 200px;
      }

      .abstract {
        width: calc(~"100% - 300px");
        height: 200px;

        h1 {
          font-size: 1rem;
          margin: 0.5rem 0;
        }

        .blog-post-meta {
          margin-bottom: 0.5rem;
          font-size: 0.85rem;
        }

        .brief {
          height: 70px;

          p {
            line-height: 20px;
            height: 100%;
            font-size: 0.8rem;
          }
        }
      }
    }
  }
}

@media (max-width: 700px) {
  .list {
    .blog__article {
      box-shadow: none;
      margin: 0;
      height: auto;
      padding: 0 5px;

      .logo {
        width: 100%;
        height: auto;
        padding: 0;
      }

      .abstract {
        width: 100%;
        height: auto;

        h1 {
          font-size: 1.2rem;
          margin: 0.5em 0;
        }

        .blog-post-meta {
          margin: 1rem 0;
        }

        .brief {
          line-height: 1.8;
          overflow: hidden;
          display: block;
          height: 100%;

          p {
            line-height: 1.5;
            font-size: 15px;
          }
        }
      }

      .readMore {
        display: none;
      }

      &:hover {
        transition: none;
        box-shadow: none;
      }
    }

    .blog__article::after {
      display: inline-block;
      content: '';
      width: 100%;
      border-top: 1px solid #ddd;
      margin: 1rem 0;
    }
  }

  .list::before {
    display: inline-block;
    content: '';
    width: 100%;
    border-top: 1px solid #DDDDDD;
    margin-bottom: 1rem;
  }
}