#body
{
  main
  {
    aside
    {
      h4
      {
        font-size: 24px;
        font-weight: 700;
        line-height: 36px;
        letter-spacing: 0.96px;
        margin-bottom:8px;
      }
      ul
      {
        li
        {
          a
          {
            color:$text-color;
            transition:color 0.5s;
            &:hover
            {
              color:$hover-color;
            }
          }
          &.active
          {
            a
            {
              color:$hover-color;
            }
          }
        }
      }
    }
    section
    {
      article
      {
        picture
        {
          display: block;
          width: 100%;
          overflow: hidden;
          position: relative;
          margin-bottom:24px;
          &::after
          {
            content:' ';
            display: block;
            width: 100%;
            padding-top:100%;            
          }
          img
          {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            position: absolute;
            top:0;
            left:0;
          }
        }
        h2
        {
          margin-bottom:16px;
          a
          {
            font-size: 18px;
            line-height: 26px; /* 144.444% */
            letter-spacing: 0.72px;
            color:$text-color;
            transition:color 0.5s;
            &:hover
            {
              color:$hover-color;
            }
          }
        }
        time
        {
          display: block;
          margin-bottom: 16px;
          color: #C4C9D5;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px; /* 157.143% */
          letter-spacing: 0.56px;
        }
      }
      .pagination
      {
        display: flex;
        justify-content:center;
        li
        {
          padding:10px 3px;
          a
          {
            display: block;
            padding:0px 10px;
            border-radius: 5px;
            color:$text-color;
            border:1px solid $text-color;
            transition:0.5s;
            &:hover
            {
              color:#fff;
              background-color: $text-color;
            }
            &.active
            {
              color:#fff;
              background-color: $text-color;
            }
          }
        }
      }
    }
    @media(min-width:980px)
    {
      display: flex;
      aside
      {
        width: 200px;
        padding-right:20px;
        h4
        {
          margin-bottom:24px;
        }
        ul
        {
          li
          {
            margin-bottom:16px;
            &:last-child
            {
              margin-bottom:0;
            }
          }
        }
      }
      section
      {
        flex:1;
        .article-list
        {
          display: flex;
          flex-wrap:wrap;
          article
          {
            width: calc(92% / 3);
            margin: 0 2% 4% 2%;
            &:nth-child(3n)
            {
              margin-right: 0;
            }
            &:nth-child(3n + 1)
            {
              margin-left: 0;
            }
          }
        }
        
      }
    }
    @media(max-width:979px)
    {
      aside
      {
        ul
        {
          display: flex;
          width:100%;
          overflow-x:auto;
          padding-bottom:24px;
          border-bottom:1px solid $border-color;
          margin-bottom:24px;
          li
          {
            margin-right:48px;
            a
            {
              white-space:nowrap;
            }
          }
        }
      }
      section
      {
        article
        {
          margin-bottom:24px;
        }
      }
    }
  }
}