#body
{
  section
  {
    padding-bottom:80px;
    header
    {
      
      h1
      {
        padding-bottom:20px;
        margin-bottom: 60px;
        border-bottom: 3px solid $main-color;
      }
    }
    .article-list
    {
      display: flex;
      flex-wrap:wrap;
      article
      {
        picture
        {
          display: block;
          position: relative;
          width: 100%;
          padding-top:100%;
          overflow: hidden;
          img
          {
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
          }
        }
        h2
        {
          font-size: 16px;
          font-weight: 500;
          line-height: 150%; /* 24px */
          letter-spacing: 1.6px;
          a
          {
            color:$text-color;
          }
        }
      }
      
      @media(min-width:768px)
      {
        article
        {
          width: calc((100% - 120px) / 4);
          margin:0 20px 40px 20px;
          &:nth-child(4n)
          {
            margin-right:0;
          }
          &:nth-child(4n + 1)
          {
            margin-left: 0;
          }
        }
      }
      @media(max-width:767px)
      {
        article
        {
          width: calc(50% - 10px);
          margin:0 10px 20px 10px;
          &:nth-child(2n)
          {
            margin-right:0;
          }
          &:nth-child(2n + 1)
          {
            margin-left: 0;
          }
        }
      }
    }
  }
}