.article-author{
  background-color:#f4f8fd;
  border-radius:.625rem;
  padding:20px;
}
@media screen and (min-width:1200px){
  .article-author{
    padding:24px;
  }
}

.article-author__content{
  border-bottom:1px solid #e0eaf7;
  padding-bottom:16px;
}

.article-author__author{
  display:flex;
  flex-direction:column;
  gap:16px;
  justify-content:space-between;
  padding-top:16px;
}
@media screen and (min-width:1200px){
  .article-author__author{
    flex-direction:row;
    gap:8px;
  }
}

.article-author__author-info{
  align-items:center;
  display:flex;
  flex-direction:row;
  gap:12px;
}
@media screen and (min-width:768px){
  .article-author__author-info{
    gap:14px;
  }
}

.article-author__author-image{
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:.625rem;
  height:60px;
  width:60px;
}
@media screen and (min-width:768px){
  .article-author__author-image{
    height:70px;
    width:70px;
  }
}

.article-author__author-img{
  -o-object-fit:cover;
     object-fit:cover;
  -o-object-position:bottom;
     object-position:bottom;
  width:100%;
}

.article-author__author-title{
  display:flex;
  flex-direction:column;
  gap:8px;
}
@media screen and (min-width:768px){
  .article-author__author-title{
    gap:6px;
  }
}

.article-author__author-full-name{
  font-family:var(--font-medium);
  font-size:16px;
}
@media screen and (min-width:768px){
  .article-author__author-full-name{
    font-size:18px;
  }
}

.article-author__author-position-at-work{
  font-size:14px;
}

.article-author__author-action{
  align-self:self-end;
  width:100%;
}
@media screen and (min-width:768px){
  .article-author__author-action{
    width:inherit;
  }
}

.article-author__author-action .component-button__item{
  width:100%;
}
@media screen and (min-width:768px){
  .article-author__author-action .component-button__item{
    width:inherit;
  }
}