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
{
  
  border-top:1px solid #898989;
  margin-bottom:80px;
  article
  {
    border-bottom: 1px solid #898989;
    display: flex;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 1.6px;
    time
    {
      
    }
    .group
    {
      display: flex;
      align-items:center;
      color:$text-color;
      &::before
      {
        content:' ';
        margin-right:20px;
        min-width:13px;
        height:13px;
        background-color: #FFECBE;
        border-radius: 100%;
        color:$text-color;
      }
    }
    h3
    {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      a
      {
        color:$text-color;
      }
    }
    p
    {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @media(min-width:768px)
    {
      padding:27px 20px;
      align-items:center;
      time
      {
        min-width:120px;
      }
      .group
      {
        min-width:240px;
      }
      h3
      {
        
        width:20%;
      }
      p
      {
        
        padding:20px;
        flex:1;
      }
      .material-symbols-outlined
      {
        width:30px;
        color:$text-color;
      }
    }
    @media(max-width:767px)
    {
      padding:10px 0;
      flex-wrap:wrap;
      time
      {
        min-width:120px;
      }
      h3
      {
        width: 100%;
        padding:15px 0;
        font-size: 20px;
        font-weight: 400;
        line-height: 30px; /* 150% */
        letter-spacing: 2px;
      }
      p
      {
        width: calc(100% - 30px);
      }
      .material-symbols-outlined
      {
        width:30px;
        color:$text-color;
      }
    }
  }


}