header
{
  
  h1
  {
    padding-top:45px;
    padding-bottom:45px;
    color:$text-color;
    font-size: 42px;
    font-weight: 500;
    line-height: 63px; /* 150% */
    letter-spacing: 4.2px;
    span
    {
      display: block;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; /* 150% */
      letter-spacing: 1.6px;
    }
  }
}

aside
{
  margin-bottom:40px;
  h4
  {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px; /* 150% */
    letter-spacing: 2px;
    color:$text-color;
    margin-bottom:25px;
    display: flex;
    span
    {
      padding-bottom:5px;
      border-bottom:1px solid #ededed;
    }
  }
  ul
  {
    display: flex;
    li
    {
      
      margin-right:20px;
      a
      {
        display: flex;
        align-items:center;
        justify-content:center;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: 1.6px;
        color:$text-color;
        padding:3px 17px;
        border:1px solid #ededed;
        border-radius: 20px;
        transition-duration:.5s;
        &::before
        {
          transition-duration:.5s;
          content:' ';
          margin-right:5px;
          width: 13px;
          height:13px;
          background-color: #898989;
          border-radius: 100%;
        }
        &:hover
        {
          border-color:$main-color;
          background-color: $main-color;
          color:#fff;
          &::before
          {
            background-color: #fff;
          }
        }
      }
      &.active
      {
        a
        {
          border-color:$main-color;
          background-color: $main-color;
          color:#fff;
          &::before
          {
            background-color: #fff;
          }
        }
      }
    }
  }
}


section
{
  margin-bottom: 80px;
  article
  {
    color:$text-color;
    margin-bottom:30px;
    picture
    {
      display: block;
      width:100%;
      border-radius: 30px;
      overflow: hidden;
      padding-bottom:22px;
      img
      {
        display: block;
        width: 100%;
      }
    }
    time
    {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; /* 150% */
      letter-spacing: 1.6px;
    }
    h3
    {
      padding:5px 0;
      font-size: 20px;
      font-weight: 400;
      line-height: 30px; /* 150% */
      letter-spacing: 2px;
      
      a
      {
        transition-duration:.5s;
        color:$text-color;
        &:hover
        {
          color:$main-color;
        }
      }
    }
    p
    {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; /* 150% */
      letter-spacing: 1.6px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
  @media(min-width:768px)
  {
    display: flex;
    article
    {
      margin:0 10px;
      width: calc((100% - 40px) / 3);
      &:nth-child(3n)
      {
        margin-right:0;
      }
      &:nth-child(3n + 1)
      {
        margin-left: 0;
      }
    }
  }
}