// https://webflow.com/playlist/popular
.home {
  $border-radius-size: 10px;

  &-article-wrapper {
    display: block;
    min-height: 330px;
    margin: 30px 0;
    border-radius: $border-radius-size;
  }

  &-article-cover {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    transition: all .3s ease;
    z-index: -1;

    @media screen and (max-width: $main-width) {
      display: none;
    }

    &:hover {
      z-index: 100;
      width: calc(50% + 30px);
    }

    img {  
      border-top-right-radius: $border-radius-size;
      border-bottom-right-radius: $border-radius-size;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &-article-inner {
    transition: all .3s ease;
    background: white;
    width: 100%;
    padding: 60px 60px 40px;
    border-radius: $border-radius-size;

    @media screen and (max-width: $mobile-width) {
      padding: 20px 15px;
    }

    &[data-cover=true] {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;

      @media screen and (max-width: $mobile-width) {
        border-radius: $border-radius-size;
      }

      &:hover {
        @media screen and (min-width: $main-width + 1px) {
          z-index: 100;
          // 防止内容换行
          padding-left: 80px;
          width: calc(100% + 20px);
        }
      }
    }
  }

  &-article {
    position: relative;
    height: 100%; 
    width: 100%;
    z-index: 1;

    &[data-cover=false] {
      padding-right: 0;
    }

    &[data-cover=true] {
      padding-right: 50%;

      @media screen and (max-width: $main-width) {
        padding: 0;
      }
    }

    &-title {
      font-size: 26px;
      line-height: 42px;
      margin: 20px 0 25px;
    }

    &-content {
      margin-top: 10px;
      font-size: 16px;
    }

    &-read {
      display: inline-block;
      margin-top: 15px;
      margin-left: 0; 
      color: $color-grey-5;
      font-weight: 600;
      font-size: 18px;
      font-style: italic;
      transition: all .1s linear;

      &:hover {
        color: $color-grey-7;
        margin-left: 10px;
      }
    }
  }
}

