@media screen and (min-width: 960px) {
  /* PC */
  /* ----------  ---------- */
  .article-item {
  }

  .article-item a {
    display: block;
    height: 100%;
    text-decoration: none;
    color: #000000;
  }

  .article-item .thumbnail {
    width: 100%;
    overflow: hidden;

    aspect-ratio: 16 / 10;
  }

  .article-item a:hover .thumbnail img {
    filter: brightness(0.825);
  }

  .article-item .thumbnail img {
    transition-property: all;
    transition-duration: 0.33s;
    transition-timing-function: ease;
  }

  .article-item .info {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  .article-item .info .labels {
    display: flex;
    align-items: center;
  }

  .article-item .info .labels p, 
  .article-item .info .labels span
  {
    font-size: 0.75rem;
    color: var(--main-color-code);
  }

  .article-item .info .labels p.published-at {
    margin-right: 0.65rem;
  }

  .article-item .info .labels span.category {
  }

  .article-item .info .title {
  }

  .article-item .info .title h3 {
    word-wrap: break-word;
    font-size: 0.95rem;
  }
}

@media screen and (max-width: 959px) {
  /* Tablet and Mobile */
  /* ----------  ---------- */
  .article-item {
  }

  .article-item a {
    display: block;
    height: 100%;
    text-decoration: none;
    color: #000000;
  }

  .article-item .thumbnail {
    width: 100%;
    overflow: hidden;

    aspect-ratio: 16 / 10;
  }

  .article-item a:hover .thumbnail img {
    filter: brightness(0.825);
  }

  .article-item .thumbnail img {
    transition-property: all;
    transition-duration: 0.33s;
    transition-timing-function: ease;
  }

  .article-item .info {
    padding-top: 0.125rem;
    padding-bottom: 0.175rem;
  }

  .article-item .info .labels {
    line-height: normal;
    margin-bottom: 0.185rem;
  }

  .article-item .info .labels p, 
  .article-item .info .labels span
  {
    font-size: 0.625rem;
    color: var(--main-color-code);
    line-height: normal;
  }

  .article-item .info .labels p.published-at {
  }

  .article-item .info .labels span.category {
  }

  .article-item .info .title {
  }

  .article-item .info .title h3 {
    word-wrap: break-word;
    font-size: 0.715rem;
    line-height: 1rem;
  }
}