header
{
  h1
  {
    font-size: 32px;
    line-height: 40px; /* 125% */
    letter-spacing: 1.28px;
    margin-bottom:40px;
    text-align: center;
  }
}
main
{
  section
  {
    article
    {
      margin-bottom:32px;
      padding-bottom:32px;
      border-bottom: 1px solid #A3A3A3;
      picture
      {
        display: block;
        overflow: hidden;
        img
        {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
          transition-duration:.5s;
        }
        &:hover
        {
          img
          {
            transform: scale(1.1);
          }
        }
      }
      >div
      {
        h3
        {
          color:$main-color;
          display: block;
          margin-bottom:8px;
        }
        h2
        {
          margin-bottom:24px;
          a
          {
            font-size: 22px;
            font-weight: 700;
            line-height: 26px; /* 118.182% */
            letter-spacing: 0.88px;
            transition-duration:.5s;
            &:hover
            {
              color:$main-color;
            }
          }
        }
        p
        {
          margin-bottom:24px;
        }
        .more
        {
          display: flex;
          span
          {
            cursor: pointer;
            padding:10px 32px;
            border-radius: 100px;
            border:1px solid $text-color;
            transition-duration:.5s;
            &:hover
            {
              color:#fff;
              background-color: $text-color;
            }
          }
        }
        
      }
    }
  }
}
aside
{
  ul
  {
    display: flex;
    justify-content:center;
    li
    {
      margin:16px;
      a
      {
        display: block;
        padding:0 5px;
      }
      &.active
      {
        a
        {
          border-bottom:1px solid $text-color;
        }
      }
    }
  }
}
@media(min-width:768px)
{
  header
  {
    h1
    {
      margin-bottom:88px;
    }
  }
  main
  {
    section
    {
      article
      {
        padding-bottom:56px;
        margin-bottom:56px;
        display: flex;
        picture
        {
          width: 295px;
          height:200px;          
          margin-right:57px;
        }
        >div
        {
          flex:1;
        }
        &:first-child
        {
          picture
          {
            width: 48%;
            position: relative;

            height: auto;
            &::before
            {
              display: block;
              content:' ';
              width: 100%;
              padding-top:66%;
            }
            img
            {
              position: absolute;
              left:0;
              top:0;
            }
          }
        }
      }
    }
  }
}
@media(max-width:767px)
{
  main
  {
    section
    {
      article
      {
        picture
        {
          margin-bottom:16px;
        }
      }
    }
  }
}