npsonair/src/scss/pages/_lists.scss

.common-list {
  list-style:none;
  padding:0;
  margin:0;

  .thumbnail {
    position:relative;
    padding:0;
    margin:0;
    overflow: hidden;

    .thumbnail-link {
      display:flex;
      width:100%;
      height:100%;

      .thumbnail-img {
        width:100%;
        height:100%;
        display:block;
        object-fit: cover;
      }
    }
  }

  .item-content {
    .item-title {
      color:#02256c;
      font-size:REM(16px);
      display:block;
      width:100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      letter-spacing: -0.025em;
      font-weight:700;

      a {
        color:inherit;

        &:hover {
          text-decoration: underline;
        }
      }
    }


    .item-summary {
      font-size:REM(13px);
      color:#252525;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      word-wrap:break-word;
      letter-spacing: -0.025em;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0 0 REM(5px) 0;
      font-weight:500;
      height: 1.28em * 2;
      -webkit-line-clamp: 2;
      line-height:1.28em;

      a {
        color:inherit;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .item-info {
      margin:0;
      padding:0;

      dl {
        margin:0;
        display:flex;
        align-items: center;

        dt {
          margin:0 REM(10px) 0 0;
        }

        dd {
          font-size:REM(14px);
          color:#959595;
          font-weight:500;
        }
      }
    }
  }

  &.news {
    .item {
      display:flex;
      padding:REM(20px) 0;
      border-bottom:1px solid #02256c;

      .thumbnail {
        width:REM(182px);
        height:REM(133px);

        flex-shrink: 0;
        margin-right:REM(13px);
      }

      .item-content {

        flex:1;
        min-width:0;
        padding:REM(8px) 0;

        .item-summary {
          height: 1.28em * 4;
          -webkit-line-clamp: 4;
          line-height:1.28em;
        }
      }
    }
  }

  &.toons {
    display:flex;
    flex-wrap:wrap;

    .item {
      width:50%;
      padding:REM(10px) REM(15px);

      .thumbnail {
        width:REM(216px);
        height:REM(216px);
        margin:0 auto REM(10px)
      }

      .item-content {
        .item-title {
          font-size:REM(20px);
        }
      }
    }
  }

  &.shorts {
    margin:0 REM(-4px);
    display:flex;
    flex-wrap:wrap;

    .item {
      width:25%;
      padding:REM(20px) REM(4px);

      .thumbnail {
        width:REM(134px);
        height:REM(220px);
        margin:0 0 REM(8px);
      }

      .item-content {
        .item-title {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          word-wrap:break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 1.28em * 2;
          -webkit-line-clamp: 2;
          line-height:1.28em;
          white-space: normal;
          word-break: break-all;
        }
      }
    }
  }

  &.clips {
    display:flex;
    flex-wrap: wrap;
    width:100%;
    margin: REM(-20px) REM(-4px);
    padding-bottom:REM(30px);

    .item {
      padding:REM(20px) REM(4px);
      width:25%;
      border-bottom:1px solid #c2c2c2;

      .thumbnail {
        width:100%;
        height:REM(95px);
      }

      .item-title {
        font-size:REM(13px);
      }

      .item-summary {
        font-size:REM(13px);
        height: 1.28em * 2;
        -webkit-line-clamp: 2;
        line-height:1.28em;
      }
    }
  }
}

.tag-container {
  width:100%;
  display:flex;
  border:1px solid #b7b7b7;
  padding: REM(10px);
  align-items: stretch;
  margin:REM(12px) 0 REM(25px);
  border-radius:REM(15px);

  .tag-title {
    flex-shrink: 0;
    color:#000000;
    margin-right:REM(25px);
    display:flex;
    align-items: center;
    font-size:REM(23.21px);
    padding:0 REM(20px);
  }

  .tag-list {
    list-style:none;
    padding:0;
    margin:REM(-3px);
    flex:1;
    min-width:0;
    display:flex;
    flex-wrap:wrap;

    li {
      padding:REM(3px);

      a {
        display:flex;
        justify-content: center;
        align-items: center;
        height:REM(28px);
        border-radius:REM(14px);
        background-color:#ffffff;
        color:#464646;
        font-size:REM(16.42px);
        padding:0 REM(14px);
        box-shadow: 1.147px 1.638px 3.8px 0.2px rgba(0, 0, 0, 0.41);
      }

      &.active {
        a {
          background-color:#02256c;
          color:#fff;
        }
      }
    }
  }
}