#body
{
  section
  {
    header
    {
      padding-top:80px;
      padding-bottom:80px;
      border-bottom:1px solid $text-color;
      margin-bottom:80px;
      h1
      {
        color: $text-color;
        font-size: 36px;
        line-height: 52px; /* 144.444% */
        letter-spacing: 0.72px;
        margin-bottom:24px;
      }
      p
      {
        max-width:720px;
      }
    }
    #knowledge-menu
    {
      margin-bottom:80px;
      overflow-y: auto;
      max-width: 100%;
      ul
      {
        display: flex;
        li
        {
          padding-right:24px;
          &:last-child
          {
            padding-right:0;
          }
          a
          {
            white-space:nowrap;
            display: block;
            background-color: $text-color;
            color:#fff;
            padding:8px 24px;
            border-radius: 100px;
          }
        }
      }
    }
    .article-list
    {
      display: flex;
      flex-wrap:wrap;
      article
      {
        picture
        {
          overflow: hidden;
          border-radius: 4px;
          display: block;
          margin-bottom: 24px;
          position: relative;
          padding-top:65%;
          img
          {
            display: block;
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
        }
        .info
        {
          display: flex;
          justify-content:space-between;
          font-size: 13px;
          line-height: 22px; /* 169.231% */
          letter-spacing: 0.26px;
          a
          {
            color:#646464;
            background-color: #FFCD2A;
            padding:4px 12px;
            border-radius: 100px;
          }
          time
          {
            color:#3D3A39;
          }
        }
        h2
        {
          padding:12px 0;
          a
          {
            color:$text-color;
            font-size: 18px;
            letter-spacing: 0.36px;
            line-height: 27px;
          }
        }
      }
      @media(min-width:768px)
      {
        article
        {
          margin:0 20px 40px 20px;
          width: calc((100% - 80px) / 3);
          &:nth-child(3n)
          {
            margin-right: 0;
          }
          &:nth-child(3n + 1)
          {
            margin-left: 0;
          }
        }
      }
      @media(max-width:767px)
      {
        article
        {
          margin:0 10px 20px 10px;
          width: calc(50% - 10px);
          &:nth-child(2n)
          {
            margin-right: 0;
          }
          &:nth-child(2n + 1)
          {
            margin-left: 0;
          }
        }
      }
    }
  }
}