#body
{
  h1
  {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 1.28px;
    text-align: center;
    margin-bottom:88px;
  }


  main
  {

    aside
    {
      ul
      {
        li
        {
          font-size: 14px;
          line-height: 18px; /* 128.571% */
          letter-spacing: 0.56px;
          margin-bottom:16px;
          a
          {
            &:hover
            {
              color:$main-color;
              transition-duration:.5s;
            }
          }
          &.active
          {
            a
            {
              color:$main-color;
            }          
          }
        }
      }
    }

    section
    {
      display: flex;
      flex-wrap:wrap;
      article
      {
        position: relative;
        padding-bottom:25px;
        picture
        {
          margin-bottom:16px;
          display: block;
          position: relative;
          padding-top:100%;
          overflow: hidden;
          img
          {
            position: absolute;
            top:0;
            left:0;
            object-fit: cover;
            object-position: center;
            width: 100%;
            display: block;
            height: 100%;
            transition-duration:.5s;
          }
          &:hover
          {
            img
            {
              transform: scale(1.1);
            }
          }
        }
        .group
        {
          margin-bottom: 4px;
          a
          {
            transition-duration:.5s;
            &:hover
            {
              color:$main-color;
            }
          }
        }
        h2
        {
          margin-bottom:8px;
          a
          {
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0.72px;
            transition-duration:.5s;
            &:hover
            {
              color:$main-color;
            }
          }
        }
        .price
        {
          position: absolute;
          bottom:0;
          left:0;
          color:$main-color;
          line-height: 22px;
        }
      }
    }

    .pagination
    {
      display: flex;
      justify-content:center;
      li
      {
        padding:0 16px;
        a
        {
          display: block;
          font-size: 14px;
          font-weight: 500;
          line-height: 18px; /* 128.571% */
          letter-spacing: 0.56px;
          padding:0 6px;
          transition-duration:.5s;
          &:hover
          {
            color:$main-color;
          }
        }
        &.active
        {
          a
          {
            color:$main-color;
          }
        }
      }
    }
    @media(min-width:1600px)
    {
      aside
      {
        width: calc((100% - 1180px) / 2);
      }
      
      section
      {
        width: 1180px;
        article
        {
          width: 250px;
          margin:0 30px 60px 30px;
          
        }
      }
    }
    @media(max-width:1599px)
    {
      aside
      {
        width: 200px;
        padding-right:20px;
      }
      .section
      {
        width: calc(100% - 200px);
      }
      section
      {
        
        article
        {
          width: 250px;
          margin-left:calc((100% - 1000px) / 6);
          margin-right:calc((100% - 1000px) / 6);
          margin-bottom:30px;
        }
      }
    }
    @media(max-width:1300px)
    {
      section
      {
        article
        {
          width: calc((100% - 60px) / 4);
          margin:0 10px 20px 10px;
        }
      }
    }
    @media(min-width:768px)
    {
      display: flex;
      section
      {
        article
        {
          &:nth-child(4n)
          {
            margin-right:0;
          }
          &:nth-child(4n + 1)
          {
            margin-left: 0;
          }
        }
      }
    }
    @media(max-width:767px)
    {
      aside
      {
        width: 100%;
        overflow-y: auto;
        margin-bottom:24px;
        ul
        {
          min-width: 100%;
          display: flex;
          li
          {
            padding-right:24px;
            a
            {
              white-space:nowrap;
            }
            &:last-child
            {
              padding-right:0;
            }
          }
        }
      }
      .section
      {
        width: 100%;
      }
      section
      {
        
        article
        {
          width: calc(50% - 12px);
          margin:0 12px 24px 12px;
          &:nth-child(2n)
          {
            margin-right:0;
          }
          &:nth-child(2n + 1)
          {
            margin-left: 0;
          }
        }
      }
    }


  }
}