#body
{
  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;
    }
  }
  section
  {
    #product-menu
    {
      margin-bottom: 24px;
      select
      {
        padding:16px 32px;
        border:1px solid $text-color;
        color:$text-color;
        border-radius: 100px;
      }
      @media(min-width:768px)
      {
        display: flex;
        flex-wrap:wrap;
        select
        {
          margin:0 10px 20px 10px;
          width: calc((100% - 60px) / 4);
          &:nth-child(4n)
          {
            margin-right: 0;
          }
          &:nth-child(4n + 1)
          {
            margin-left: 0;
          }
        }
      }
      @media(max-width:767px)
      {
        select
        {
          display: block;
          width: 100%;
          margin-bottom: 24px;
        }
      }
    }
    /*
    #product-menu
    {
      border-radius: 10px;
      background-color: #FFCD2A;
      padding:24px 12px 12px 12px;
      select
      {
        margin:0 12px 12px 12px;
        border:0;
        padding:0;
        line-height:36px;
        height:36px;
      }
      
    }
      */
    .article-list
    {

      article
      {
        picture
        {
          display: block;
          position: relative;
          margin-bottom:24px;
          &::before
          {
            content:' ';
            display: block;
            padding-top:100%;
          }
          img
          {
            border-radius: 5px;
            position: absolute;
            top:0;
            left:0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
        }
        .parent-url
        {
          
          display: flex;
          margin-bottom: 15px;
          a
          {
            font-size:12px;
            background-color: $main-color;
            color:#FFCD2A;
            padding:2px 15px;
            border-radius: 5px;
          }
        }
        h2
        {
          font-size: 18px;
          line-height: 26px;
          letter-spacing: 0.36px;
          margin-bottom:6px;
          a
          {
            color: #0F0F0F;
          }
        }
        p
        {
          color:#B1B1B1;
        }
      }
    }
  }
  @media(min-width:768px)
  {
    header
    {
      padding-top:40px;
      padding-bottom:40px;
      margin-bottom:40px;
      h1
      {
        font-size: 30px;
        line-height: 43px; /* 143.333% */
        letter-spacing: 0.6px;
      }
    }
    section
    {
      /*
      #product-menu
      {
        margin-bottom:40px;
       
        display: flex;
        select{
          flex:1;
        }
      }
      */
      .article-list
      {
        display: flex;
        flex-wrap:wrap;
        article
        {
          width: calc(91% / 4);
          margin:0 1.5% 3% 1.5%;
          &:nth-child(4n)
          {
            margin-right: 0;
          } 
          &:nth-child(4n + 1)
          {
            margin-left:0;
          }
        }
      }
      
    }
  }
  @media(max-width:767px)
  {
    section
    {
      /*
      #product-menu
      {
        margin-bottom:40px;
        padding:24px 24px 0 24px;
        select
        {
          margin:0 0 24px 0;
          width: 100%;
        }
      }
      */
      .article-list
      {
        article
        {
          width: 100%;
          margin-bottom:33px
        }
      }
    }
    
  }
}