.article-page{
    padding: 0.7rem;
    .path{
      padding:  1rem;
      font-family: Gilroy-Regular;
      font-size: 0.75rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 1.667rem;
      letter-spacing: 0rem;
      color: #204f5e;
      a:hover {
        color: #23bcec;
      }
    }
    img{
      width: 100%;
      border-radius: 2.083rem;
      display: block;
    }
    .content{
      padding-top: 1rem;
      max-width: 1400px;
      margin: 0 auto;
      h1{
        font-family: Gilroy-Bold;
        font-size: 2.5rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 3rem;
        letter-spacing: 0rem;
        color: #204f5e;
        text-align: center;
        padding: 2rem 0;
      }
      .text{
        white-space: pre-line;
        font-family: Gilroy-Medium;
        font-size: 0.917rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1.25rem;
        letter-spacing: 0rem;
        color: #204f5e;
        border-top: 1px solid #204f5e77;
        padding: 1.5rem 0;
        border-bottom: 1px solid #204f5e77;
      }
      .btns{
        padding: 2rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        a{
          display: block;
          width: 2.917rem;
          height: 2.917rem;
          text-align: center;
          line-height: 2.917rem;
          border-radius: 50%;
          color: #204f5e;
          border: 1px solid #204f5e77;
          font-size: 2rem;
          &:hover{
            opacity: .7;
          }
        }
      }
      .actor{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 1.5rem;
        .avatar{
          display: flex;
          align-items: center;
          img{
            width: 2.833rem;
            height: 2.833rem;
            border-radius: 50%;
            margin-right: .5rem;
            background-color: #434343;
          }
          h3{
            font-family: Gilroy-Bold;
            font-size: 1.25rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 1.25rem;
            letter-spacing: 0rem;
            color: #204f5e;
          }
          span{
            font-family: Gilroy-Medium;
            font-size: 0.75rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #84abb8;
          }
        }
      }
      .editor{
        font-family: Gilroy-Medium;
        font-size: 0.917rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 2.083rem;
        letter-spacing: 0rem;
        color: #204f5e;
        span{
          padding-left: 1rem;
        }
        .iconfont::before{
          margin: 0 .3rem;
          display: inline-block;
          width: 2.083rem;
          height: 2.083rem;
          text-align: center;
          line-height:2.083rem;
          border-radius: 50%;
          font-weight: 600;
          font-size: 1.2rem;
          background-color: #def5f5;
          
        }
        .iconfont:hover{
          cursor: pointer;
          opacity: 0.9;
        }
      }
    }
  }
  
@media (max-width: 1024px) {
}
@media (max-width: 640px){
  .article-page{
    margin-top: 110px;
    padding: 1rem;
    .path {
      line-height: 1rem;
      padding: 1rem 0 ;
    }
    .content{
      h1{
        font-size: 1.4rem;
        line-height: 2rem;
        padding: 0;
        padding-bottom: 1rem;
      }
      .actor{
            flex-direction: column;
            align-items: start;
            gap: 1rem;
            .avatar{
              line-height: 0;
            }
            .editor{
              span{
                padding: 0;
              }
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
          }
    } 
  }
}